diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-backgrounds')
1363 files changed, 49089 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/META.yml b/testing/web-platform/tests/css/css-backgrounds/META.yml new file mode 100644 index 0000000000..d673be5f4f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.csswg.org/css-backgrounds/ +suggested_reviewers: + - dbaron + - fantasai diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-backdrop-infinite-duration-crash.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-backdrop-infinite-duration-crash.html new file mode 100644 index 0000000000..40aa54debc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-backdrop-infinite-duration-crash.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<style> + #target { + background: blue; + border: 2px solid black; + height: 100px; + width: 100px; + } +</style> +<body> + <dialog id="target"></dialog> +</body> +<script> + window.onload = async () => { + const target = document.getElementById('target'); + target.showModal(); + const anim = + target.animate({ backgroundColor: ['green', 'blue'] }, { + duration: Infinity, + pseudoElement: '::backdrop' + }); + await anim.ready; + await waitForAnimationFrames(3); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport-ref.html new file mode 100644 index 0000000000..e47a83e393 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +.box { + width: 100px; + height: 10000px; +} +.container { + width: 50px; + height: 50px; + background-color: rgb(100, 100, 0); +} +</style> +<body> + <div class='box'></div> + <div class='container'></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport.html new file mode 100644 index 0000000000..db212e3992 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-element-not-visible-at-current-viewport-ref.html"> +<style> +.box { + width: 100px; + height: 10000px; +} +.container { + width: 50px; + height: 50px; + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="box"></div> +<div class="container"></div> + +<script> +takeScreenshot(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-additive-keyframe-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-additive-keyframe-ref.html new file mode 100644 index 0000000000..b8ef74f8e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-additive-keyframe-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.container { + width: 100px; + height: 100px; + background-color: rgb(200, 200, 0); +} +</style> +<body> + <div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-additive-keyframe.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-additive-keyframe.html new file mode 100644 index 0000000000..6bb1b8257e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-additive-keyframe.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-fallback-additive-keyframe-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: rgb(0, 200, 0); +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container" id="target"></div> + +<script> +var target = document.getElementById("target"); +target.animate([ + { backgroundColor: 'rgb(200, 0, 0)', composite: 'accumulate', easing: 'steps(2, end)' }, + { backgroundColor: 'rgb(0, 0, 0' } +], { + duration: 1000000 +}); +requestAnimationFrame(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-0-percent-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-0-percent-ref.html new file mode 100644 index 0000000000..7a0046f27b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-0-percent-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(0, 100, 100)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-0-percent.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-0-percent.html new file mode 100644 index 0000000000..9140b705d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-0-percent.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-fallback-missing-0-percent-ref.html"> +<style> +.container { + /*TODO(crbug.com/1163949): Support animation keyframes without 0% or 100%.*/ + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 20% { background-color: rgb(0, 200, 0); } + 80% { background-color: rgb(0, 0, 200); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-100-percent-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-100-percent-ref.html new file mode 100644 index 0000000000..7a0046f27b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-100-percent-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(0, 100, 100)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-100-percent.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-100-percent.html new file mode 100644 index 0000000000..1c5b63201f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-missing-100-percent.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-fallback-missing-100-percent-ref.html"> +<style> +.container { + /*TODO(crbug.com/1163949): Support animation keyframes without 0% or 100%.*/ + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(200, 0, 0); } + 20% { background-color: rgb(0, 200, 0); } + 80% { background-color: rgb(0, 0, 200); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-replace-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-replace-ref.html new file mode 100644 index 0000000000..271281cf88 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-replace-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(0, 0, 100)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-replace.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-replace.html new file mode 100644 index 0000000000..ce4e927f73 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fallback-replace.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-fallback-replace-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: red 1000000s cubic-bezier(0,1,1,0) -500000s, green 1000000s cubic-bezier(0,1,1,0) -500000s, blue 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes red { + 0% { background-color: rgb(0, 0, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +@keyframes green { + 0% { background-color: rgb(0, 0, 0); } + 100% { background-color: rgb(0, 200, 0); } +} +@keyframes blue { + 0% { background-color: rgb(0, 0, 0); } + 100% { background-color: rgb(0, 0, 200); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-field-crash.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-field-crash.html new file mode 100644 index 0000000000..8e702fbac6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-field-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<style> +@keyframes bgcolor { + 0% { background: Field; } + 100% { background: green; } +} +.target { + animation: bgcolor 50ms; + width: 100px; + height: 100px; +} +</style> +<div class="target"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fragmented-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fragmented-ref.html new file mode 100644 index 0000000000..845a8b5a5b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fragmented-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="columns: 2; width: 200px; height: 100px;"> + <div style="height: 100px; background: rgb(100, 100, 0)"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fragmented.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fragmented.html new file mode 100644 index 0000000000..64d94b9322 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-fragmented.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-fragmented-ref.html"> +<style> +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div style="columns: 2; width: 200px; height: 100px"> + <div style="animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; height: 100px"></div> +</div> + +<script> +takeScreenshot(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-half-opaque-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-half-opaque-ref.html new file mode 100644 index 0000000000..6bcb9840b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-half-opaque-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.box { + width: 600px; + height: 600px; + background-color: rgba(75, 125, 0, 0.8); +} +</style> +<body> + <div class='box'></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-half-opaque.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-half-opaque.html new file mode 100644 index 0000000000..2e00fa6113 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-half-opaque.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-half-opaque-ref.html"> +<style> +.container { + width: 600px; + height: 600px; + will-change: transform; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgba(0, 200, 0, 1); } + 100% { background-color: rgba(200, 0, 0, 0.6); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-in-body-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-in-body-ref.html new file mode 100644 index 0000000000..5d3d419db6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-in-body-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<style> +body { + background-color: rgb(100, 100, 0); +} +</style> +<body> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-in-body.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-in-body.html new file mode 100644 index 0000000000..e5783f2b41 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-in-body.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-in-body-ref.html"> +<style> +body { + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<body> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-empty-no-draw-crash.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-empty-no-draw-crash.html new file mode 100644 index 0000000000..a00c08abce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-empty-no-draw-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<style> +@keyframes bgcolor { + + 0% { background: blue; } + 100% { background: none; } +} +.target { + animation: bgcolor 50ms; + opacity: 0.9; + height: 0.4px; + margin: 21.6px; +} +</style> +<div class="target"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero-ref.html new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero-ref.html diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero.html new file mode 100644 index 0000000000..6ba25c8196 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-non-zero-size-element-change-to-zero-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container" id="target"></div> + +<script> +requestAnimationFrame(() => { + var target = document.getElementById("target"); + target.style.width = '0px'; + target.style.height = '0px'; + requestAnimationFrame(() => { + takeScreenshot(); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-pseudo-element-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-pseudo-element-ref.html new file mode 100644 index 0000000000..d82d28782b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-pseudo-element-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<style> + .body { + position: relative; + nargin: 0; + padding: 0; + } + .block { + width: 100px; + height: 100px; + padding: 0; + display: inline-block; + position: absolute; + top: 10px; + margin: 0; + padding: 0; + } + + .block1 { + background: rgb(127, 0, 0); + left: 10px; + } + + .block2 { + background: rgb(0, 127, 0); + left: 120px; + } + + .block3 { + background: rgb(0, 0, 127); + left: 230px; + } +</style> +<body> + <div class = "block block1"></div> + <div class = "block block2"></div> + <div class = "block block3"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-pseudo-element.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-pseudo-element.html new file mode 100644 index 0000000000..e5066281d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-pseudo-element.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-pseudo-element-ref.html"> +<style> + body { + padding: 0; + margin: 0; + } + .block, .block:after, .block:before { + width: 100px; + height: 100px; + padding: 0; + display: inline-block; + /* Use a long transition that can be stalled at the midpoint. */ + transition: background 100000s cubic-bezier(0,1,1,0); + } + + .block { + background: rgb(0, 254, 0); + margin-left: 120px; + margin-top: 10px; + position: relative; + } + + .block:after { + background: rgb(0, 0, 254); + content: ""; + position: absolute; + left: 110px; + } + + .block:before { + background: rgb(254, 0, 0); + content: ""; + position: absolute; + left: -110px; + } + + .block.tweak, .block.tweak:before, .block.tweak:after { + background: black; + } +</style> +<body> + <div class="block"></div> +</body> +<script src="/common/reftest-wait.js"></script> +<script src="../../../web-animations/testcommon.js"></script> +<script> + window.onload = async () => { + await waitForAnimationFrames(2); + + const promises = []; + document.querySelector('.block').classList.add('tweak'); + document.getAnimations().forEach(anim => { + anim.currentTime = anim.effect.getTiming().duration/2; + promises.push(anim.ready); + }); + + Promise.all(promises).then(() => { + waitForAnimationFrames(2).then(() => { + takeScreenshot(); + }); + }); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-ref.html new file mode 100644 index 0000000000..8e0e70ba20 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(100, 100, 0)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-removed-element-crash.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-removed-element-crash.html new file mode 100644 index 0000000000..f8408fb5a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-removed-element-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<iframe id="foo"></iframe> +<div id="bar"></div> + +<script> + $ = document.querySelector.bind(document); + var target = document.getElementById("bar"); + target.animate([{"backgroundColor":"blue"},{"backgroundColor":"green"}], {"duration":10}); + $('iframe').contentDocument.documentElement.appendChild(target); + $('#foo').remove(); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-single-keyframe-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-single-keyframe-ref.html new file mode 100644 index 0000000000..befe7c7f9b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-single-keyframe-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(200, 0, 0)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-single-keyframe.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-single-keyframe.html new file mode 100644 index 0000000000..019b7f83f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-single-keyframe.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-single-keyframe-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: rgb(200, 0, 0); +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container" id="target"></div> + +<script> +document.getElementById("target").animate({backgroundColor: 'rgb(0, 200, 0)'}, 100000000000); +takeScreenshot(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes1.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes1.html new file mode 100644 index 0000000000..cba0113f00 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes1.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 5% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -50000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 10% { + background-color: rgb(200, 0, 0); + animation-timing-function: cubic-bezier(0,1,1,0); + } + 100% { + background-color: rgb(0, 0, 200); + animation-timing-function: cubic-bezier(0,1,1,0); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +// This test and the "one-element-three-keyframes-animation2.html" ensure that +// we select the correct start and end keyframes for interpolation. In this +// test, the start delay of the animation makes it jump to 5% right away, and in +// the "one-element-three-keyframes-animation2.html" the start delay makes it +// jump to 50%. So for this test, we would choose the keyframes at 0% and 10% +// for interpolation, where for the other test it would be 10% and 100%. +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes2-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes2-ref.html new file mode 100644 index 0000000000..823d8ac382 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes2-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(100, 0, 100)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes2.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes2.html new file mode 100644 index 0000000000..d2be16034f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes2.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-three-keyframes2-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 10% { + background-color: rgb(200, 0, 0); + animation-timing-function: cubic-bezier(0,1,1,0); + } + 100% { + background-color: rgb(0, 0, 200); + animation-timing-function: cubic-bezier(0,1,1,0); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +// The start delay of the animation makes it jump 50% of the animation, which +// means we would select the keyframes at 10% and 100% for animation. The +// progress would be (0.5-0.1) / (1-0.1) = 0.44. So a timing function input of +// 0.44 results in an output of 0.5. +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes3.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes3.html new file mode 100644 index 0000000000..708faa5560 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-three-keyframes3.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 5% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -50000s; +} +@keyframes bgcolor { + 10% { + background-color: rgb(200, 0, 0); + animation-timing-function: cubic-bezier(0,1,1,0); + } + 0% { background-color: rgb(0, 200, 0); } + 100% { + background-color: rgb(0, 0, 200); + animation-timing-function: cubic-bezier(0,1,1,0); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-will-change-contents-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-will-change-contents-ref.html new file mode 100644 index 0000000000..d980a29ff7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-will-change-contents-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.box { + width: 600px; + height: 600px; + background-color: rgba(0, 200, 0, 1); +} +</style> +<body> + <div class='box'></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-will-change-contents.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-will-change-contents.html new file mode 100644 index 0000000000..a218098721 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-will-change-contents.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-will-change-contents-ref.html"> +<style> +.container { + width: 600px; + height: 600px; + will-change: contents; + /* Start with a short delay and ensure that we pick up the color change when + the animation enters the active phase. */ + animation: bgcolor 10s steps(1, jump-start) backwards 0.2s; +} +@keyframes bgcolor { + 0% { background-color: rgba(200, 0, 0, 1); } + 100% { background-color: rgba(0, 200, 0, 1); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> + function waitForActiveAnimation() { + const anim = document.getAnimations()[0]; + return new Promise(resolve => { + const tick = () => { + requestAnimationFrame(() => { + if (anim.currentTime > 200) + resolve(); + else + tick(); + }); + }; + tick(); + }); + } + + window.onload = async () => { + await waitForActiveAnimation(); + takeScreenshot(); + }; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-blur-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-blur-ref.html new file mode 100644 index 0000000000..31418d093c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-blur-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> + #target { + height: 100px; + width: 100px; + background: green; + display: inline-block; + margin: 10px; + } + #container { + filter: blur(5px); + } +</style> +<body> + <div id="container"> + <div id="target"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-blur.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-blur.html new file mode 100644 index 0000000000..86e97b0f7e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-blur.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-blur-ref.html"> +<!-- Allow off by one errors on each color channel. --> +<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-12100"> +<style> + @keyframes colorize { + 0% { background-color: blue; } + 50% { background-color: green; } + 100% { background-color: red; } + } + #target { + height: 100px; + width: 100px; + animation-name: colorize; + animation-duration: 100000s; + animation-timing-function: steps(2, end); + display: inline-block; + margin: 10px; + } + .blur { + filter: blur(5px); + } + .color-shift { + animation-delay: -50000s; + } +</style> +<body> + <div id="container"> + <div id="target"></div> + </div> +</body> +<script src="/common/reftest-wait.js"></script> +<script type="text/javascript"> + async function rAF() { + return new Promise((resolve) => { + requestAnimationFrame(resolve); + }); + }; + + window.onload = async () => { + const anim = document.getAnimations()[0]; + await anim.ready; + await rAF(); + // Add blur filter while animation is running. + container.classList.add('blur'); + await rAF(); + // Shift animation to the midpoint. + target.classList.add('color-shift'); + await rAF(); + takeScreenshot(); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-images-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-images-ref.html new file mode 100644 index 0000000000..ba414f7b34 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-images-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<style> +.container1 { + width: 200px; + height: 200px; + background-image: url("../support/green.png"), url("../support/red.png"); + background-size: 100px 100px; + background-repeat: no-repeat; + background-color: rgb(0, 0, 199); +} +.container2 { + width: 200px; + height: 200px; + background-image: url("../support/green.png"), url("../support/red.png"); + background-size: 100px 100px; + background-repeat: no-repeat; +} +.container3 { + width: 100px; + height: 100px; + background-image: url("../support/green.png"), url("../support/red.png"); +} +</style> +</style> +<body> + <div class="container1"></div> + <div class="container2"></div> + <div class="container3"></div> + <div class="container3"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-images.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-images.html new file mode 100644 index 0000000000..0ea29b8f1c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-images.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-images-ref.html"> +<style> +.container1 { + width: 200px; + height: 200px; + /* Test the case where images partially occludes the background color */ + background-image: url("../support/green.png"), url("../support/red.png"); + background-size: 100px 100px; + background-repeat: no-repeat; + animation: blue-anim 100s; +} +.container2 { + width: 200px; + height: 200px; + /* Test the case where images partially occludes the background color */ + background-image: url("../support/green.png"), url("../support/red.png"); + background-size: 100px 100px; + background-repeat: no-repeat; + animation: transparent-anim 100s; +} +.container3 { + width: 100px; + height: 100px; + /* Test the case where images occludes the background color */ + background-image: url("../support/green.png"), url("../support/red.png"); + animation: transparent-anim 100s; +} +.container4 { + width: 100px; + height: 100px; + /* Test the case where images occludes the background color */ + background-image: url("../support/green.png"), url("../support/red.png"); + animation: blue-anim 100s; +} +@keyframes blue-anim { + 0% { background-color: rgb(0, 0, 199); } + 100% { background-color: rgb(0, 0, 200); } +} +@keyframes transparent-anim { + 0% { background-color: rgba(0, 200, 0, 0); } + 100% { background-color: rgba(200, 0, 0, 0); } +} +</style> +<body> + <div class="container1"></div> + <div class="container2"></div> + <div class="container3"></div> + <div class="container4"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-mask-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-mask-ref.html new file mode 100644 index 0000000000..6cb20f12d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-mask-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +.container { + width: 100px; + height: 100px; + -webkit-mask-image: url('../resources/stripes-100.png'); + -webkit-mask-size: 100px 100px; + -webkit-mask-repeat: no-repeat; + mask-image: url('../resources/stripes-100.png'); + mask-size: 100px 100px; + mask-repeat: no-repeat; + background-color: rgb(0, 0, 150); +} +</style> +</style> +<body> + <div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-mask.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-mask.html new file mode 100644 index 0000000000..9001121edc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-mask.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-mask-ref.html"> +<style> +@keyframes blue-anim { + 0% { background-color: rgb(0, 0, 100); } + 100% { background-color: rgb(0, 0, 200); } +} +.container { + width: 100px; + height: 100px; + -webkit-mask-image: url('../resources/stripes-100.png'); + -webkit-mask-size: 100px 100px; + -webkit-mask-repeat: no-repeat; + mask-image: url('../resources/stripes-100.png'); + mask-size: 100px 100px; + mask-repeat: no-repeat; + + /* force animation to start effectively stalled at the midpoint */ + animation: blue-anim 10000s cubic-bezier(0, 1, 1, 0) -5000s; +} + +</style> +<script src="/common/reftest-wait.js"></script> +<body> + <div class="container"></div> +<script> +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table1-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table1-ref.html new file mode 100644 index 0000000000..7522c388f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +table { + width: 160px; +} +</style> +<table> + <tr><td>1 + <tr><td>2 +</table> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table1.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table1.html new file mode 100644 index 0000000000..de5f482e88 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-table1-ref.html"> +<style> +table { + width: 160px; +} +tr { + animation: bgcolor 0.1s; +} +@keyframes bgcolor { + 0% { background-color: rgba(0, 200, 0, 0); } + 100% { background-color: rgba(200, 0, 0, 0); } +} +</style> +<table> + <tr><td>1 + <tr><td>2 +</table> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table2.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table2.html new file mode 100644 index 0000000000..5fc03b3d92 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table2.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-table1-ref.html"> +<style> +table { + width: 160px; +} +.firstcolumn { + animation: bgcolor 100s; +} +@keyframes bgcolor { + 0% { background-color: rgba(0, 200, 0, 0); } + 100% { background-color: rgba(200, 0, 0, 0); } +} +</style> +<table> + <colgroup> + <col class="firstcolumn"> + </colgroup> + <tr><td>1</td></tr> + <tr><td>2</td></tr> +</table> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table3.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table3.html new file mode 100644 index 0000000000..0ee8fdd69f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table3.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-table1-ref.html"> +<style> +table { + width: 160px; +} +td { + animation: bgcolor 100s; +} +@keyframes bgcolor { + 0% { background-color: rgba(0, 200, 0, 0); } + 100% { background-color: rgba(200, 0, 0, 0); } +} +</style> +<table> + <tr><td>1 + <tr><td>2 +</table> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table4.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table4.html new file mode 100644 index 0000000000..319ee77481 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-table4.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-table1-ref.html"> +<style> +table { + width: 160px; + columns: 2; +} +tr { + animation: bgcolor 0.1s; +} +@keyframes bgcolor { + 0% { background-color: rgba(0, 200, 0, 0); } + 100% { background-color: rgba(200, 0, 0, 0); } +} +</style> +<table> + <tr><td>1 + <tr><td>2 +</table> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-zero-playbackRate-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-zero-playbackRate-ref.html new file mode 100644 index 0000000000..823d8ac382 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-zero-playbackRate-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(100, 0, 100)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-zero-playbackRate.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-zero-playbackRate.html new file mode 100644 index 0000000000..2a56399462 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-with-zero-playbackRate.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-zero-playbackRate-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(200, 0, 0); } + 100% { background-color: rgb(0, 0, 200); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +var animation = document.getAnimations()[0]; +animation.ready.then(() => { + animation.playbackRate = 0; + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero-ref.html new file mode 100644 index 0000000000..26882bd23b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.box { + width: 100px; + height: 100px; + background-color: rgb(100, 100, 0); +} +</style> +<body> + <div class='box'></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero.html new file mode 100644 index 0000000000..f62380f9ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-zero-size-element-change-to-non-zero-ref.html"> +<style> +.container { + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container" id="target"></div> + +<script> +requestAnimationFrame(() => { + var target = document.getElementById("target"); + target.style.width = '100px'; + target.style.height = '100px'; + requestAnimationFrame(() => { + takeScreenshot(); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-ref.html new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element-ref.html diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element.html new file mode 100644 index 0000000000..008b78a4c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation-zero-size-element.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-zero-size-element-ref.html"> +<style> +.container { + animation: bgcolor 1s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +// Pass if there is no crash, nothing shows on the screen +takeScreenshot(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation.html new file mode 100644 index 0000000000..597f52c915 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-animation.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-interpolation.html new file mode 100644 index 0000000000..bb727d8e4e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-interpolation.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<meta name="test" content="background-color supports animation as a <color>"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-color: #eee; +} +.target { + width: 60px; + height: 60px; + display: inline-block; + border: 2px solid black; + margin-right: 2px; + color: rgba(0, 0, 255, 0.5); + background-color: black; +} +.expected { + margin-right: 15px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'background-color', + from: neutralKeyframe, + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(0, 38, 0)'}, + {at: 0.6, expect: 'rgb(0, 77, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'initial', + to: 'green', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'}, + {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'inherit', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(255, 255, 255)'}, + {at: 0, expect: 'rgb(238, 238, 238)'}, + {at: 0.3, expect: 'rgb(167, 205, 167)'}, + {at: 0.6, expect: 'rgb(95, 172, 95)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 73, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'unset', + to: 'green', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'}, + {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'white', + to: 'orange', +}, [ + {at: -0.3, expect: 'white'}, + {at: 0, expect: 'white'}, + {at: 0.3, expect: 'rgb(255, 228, 179)'}, + {at: 0.6, expect: 'rgb(255, 201, 102)'}, + {at: 1, expect: 'orange'}, + {at: 1.5, expect: 'rgb(255, 120, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'transparent', + to: 'green', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'}, + {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'currentcolor', + to: 'rgba(0, 255, 0, 0.75)', +}, [ + {at: -0.5, expect: 'rgba(0, 0, 255, 0.38)'}, + {at: 0, expect: 'rgba(0, 0, 255, 0.5)'}, + {at: 0.25, expect: 'rgba(0, 85, 170, 0.56)'}, + {at: 0.5, expect: 'rgba(0, 153, 102, 0.63)'}, + {at: 0.75, expect: 'rgba(0, 208, 47, 0.69)'}, + {at: 1, expect: 'rgba(0, 255, 0, 0.75)'}, + {at: 1.5, expect: 'rgba(0, 255, 0, 0.88)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-scroll-into-viewport-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-scroll-into-viewport-ref.html new file mode 100644 index 0000000000..e5bbf67dfe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-scroll-into-viewport-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +.container { + width: 100vw; + height: 100vh; + overflow: hidden; + position: relative; +} +.spacer { + height: 1000vh; +} +#target { + width: 50vw; + height: 50vh; + background-color: rgb(100, 100, 0); +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> + <div class="container"> + <div class="spacer"></div> + <div id="target"></div> + </div> +</body> +<script> +async function raf() { + return new Promise((resolve) => { + requestAnimationFrame(() => { + resolve(); + }); + }) +} + +window.onload = async () => { + await raf(); + await raf(); + target.scrollIntoView(); + takeScreenshot(); +}; +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-scroll-into-viewport.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-scroll-into-viewport.html new file mode 100644 index 0000000000..24b22b43e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-scroll-into-viewport.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-scroll-into-viewport-ref.html"> +<style> +.container { + width: 100vw; + height: 100vh; + overflow: hidden; + position: relative; +} +.spacer { + height: 1000vh; +} +#target { + width: 50vw; + height: 50vh; + background-color: green; + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> + <div class="container"> + <div class="spacer"></div> + <div id="target"></div> + </div> +</body> +<script> +async function raf() { + return new Promise((resolve) => { + requestAnimationFrame(() => { + resolve(); + }); + }) +} + +document.getAnimations()[0].ready.then(async () => { + await raf(); + await raf(); + target.scrollIntoView(); + takeScreenshot(); +}); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-colormix.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-colormix.html new file mode 100644 index 0000000000..3c7fd634c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-colormix.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<title>currentColor in nested color-mix() with transition</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<style> + #parent { + color: white; + background-color: + color-mix(in srgb, + color-mix(in srgb, black, currentColor), + black); + height: 200px; + width: 200px; + } + #child { + background-color: inherit; + transition: background-color; + height: 100px; + width: 100px; + } +</style> +<div id="parent"> + <div id="child"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script> +async function runTest() { + promise_test(async t => { + await waitForNextFrame(); + const child = document.getElementById('child'); + const parent = document.getElementById('parent'); + let parentBG = getComputedStyle(parent).backgroundColor; + let childBG = getComputedStyle(child).backgroundColor; + + assert_equals(parentBG, "color(srgb 0.25 0.25 0.25)"); + assert_equals(childBG, "color(srgb 0.25 0.25 0.25)"); + + // Style change triggers a CSS transition. Wait for the + // transition to start. + await waitForNextFrame(); + child.style = 'color:black'; + await Promise.all(document.getAnimations().map(a => a.ready)); + + parentBG = getComputedStyle(parent).backgroundColor; + childBG = getComputedStyle(child).backgroundColor; + assert_equals(parentBG, "color(srgb 0.25 0.25 0.25)"); + assert_equals(childBG, "color(srgb 0 0 0)"); + }, 'Transition with currentColor in color-mix'); +} +window.onload = runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-currentcolor-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-currentcolor-ref.html new file mode 100644 index 0000000000..b910478656 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-currentcolor-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> + body { + padding: 0; + margin: 0; + } + .block { + width: 100px; + height: 100px; + padding: 0; + display: inline-block; + background: rgb(0, 127, 0); + margin: 10px; + } +</style> +<body> + <div class="block"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-currentcolor.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-currentcolor.html new file mode 100644 index 0000000000..7d12b44051 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition-currentcolor.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-transition-currentcolor-ref.html"> +<style> + body { + padding: 0; + margin: 0; + } + .block { + width: 100px; + height: 100px; + padding: 0; + display: inline-block; + background: rgb(0, 254, 0); + color: black; + margin: 10px; + /* Use a long transition that can be stalled at the midpoint. */ + transition: background 100000s cubic-bezier(0,1,1,0); + } + .block.tweak { + background: currentColor; + } +</style> +<body> + <div class="block"></div> +</body> +<script src="/common/reftest-wait.js"></script> +<script> + window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.querySelector('.block').classList.add('tweak'); + const anim = document.getAnimations()[0]; + anim.ready.then(() => { + anim.currentTime = anim.effect.getTiming().duration/2; + requestAnimationFrame(() => { + takeScreenshot(); + }); + }); + }); + }); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition.html new file mode 100644 index 0000000000..d43b9415cf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transition.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: rgb(0, 200, 0); + transition-property: background-color; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + transition-duration: 1000000s; + transition-timing-function: cubic-bezier(0,1,1,0); + transition-delay: -500000s; +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container" id="target"></div> + +<script> +function update() { + document.getElementById('target').style.backgroundColor = "rgb(200, 0, 0)"; + requestAnimationFrame(() => { + takeScreenshot(); + }); +} +requestAnimationFrame(function() { + requestAnimationFrame(update); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transparent-animation-in-body-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transparent-animation-in-body-ref.html new file mode 100644 index 0000000000..72c0c83ffc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transparent-animation-in-body-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<body> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transparent-animation-in-body.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transparent-animation-in-body.html new file mode 100644 index 0000000000..f156f91408 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-transparent-animation-in-body.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-transparent-animation-in-body-ref.html"> +<style> +body { + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgba(0, 200, 0, 0); } + 100% { background-color: rgba(200, 0, 0, 0); } +} +</style> +<body> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-image-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-image-interpolation.html new file mode 100644 index 0000000000..feda6afebe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-image-interpolation.html @@ -0,0 +1,230 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image"> +<meta name="test" content="background-image supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-image: url(../resources/blue-100.png); + background-size: 0 0; +} +.target { + width: 100px; + height: 100px; + display: inline-block; + border: 10px solid black; + background-repeat: no-repeat; + background-image: url(../resources/blue-100.png); +} +.expected { + border-color: green; + margin-right: 2px; +} +</style> + +<body> +<script> +// Neutral to image +var from = 'url(../resources/blue-100.png)'; +var to = 'url(../resources/green-100.png)'; +test_interpolation({ + property: 'background-image', + from: neutralKeyframe, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// initial to image +to = 'url(../resources/green-100.png)'; +test_interpolation({ + property: 'background-image', + from: 'initial', + to: to, +}, [ + {at: -0.3, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.3, expect: 'none'}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// inherit to image +from = 'url(../resources/blue-100.png)'; +to = 'url(../resources/green-100.png)'; +test_interpolation({ + property: 'background-image', + from: 'inherit', + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// unset to image +test_interpolation({ + property: 'background-image', + from: 'unset', + to: to, +}, [ + {at: -0.3, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.3, expect: 'none'}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Image to image +from = 'url(../resources/blue-100.png)'; +to = 'url(../resources/green-100.png)'; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Image to gradient +from = 'url(../resources/blue-100.png)'; +to = 'linear-gradient(45deg, blue, orange)'; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Image to crossfade +from = 'url(../resources/blue-100.png)'; +to = 'cross-fade(url(../resources/green-100.png), url(../resources/stripes-100.png), 0.5)'; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Gradient to gradient +from = 'linear-gradient(-45deg, red, yellow)'; +to = 'linear-gradient(45deg, blue, orange)'; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Keyword to image +from = 'none'; +to = 'url(../resources/green-100.png)'; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Multiple to multiple +var fromA = 'url(../resources/stripes-100.png)'; +var fromB = 'url(../resources/blue-100.png)'; +var toA = 'url(../resources/blue-100.png)'; +var toB = 'url(../resources/stripes-100.png)'; +from = fromA + ', ' + fromB; +to = toA + ', ' + toB; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Single to multiple +from = 'url(../resources/blue-100.png)'; +var toA = 'url(../resources/stripes-100.png)'; +var toB = 'url(../resources/green-100.png)'; +to = toA + ', ' + toB; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + // The interpolation of different numbers of background-images looks a bit strange here. + // Animating background-image is not specified to be possible however we do it for backwards compatibility. + // With this in mind we kept the implementation simple at the expense of this corner case because there is + // no official specification to support. + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); + +// Multiple mismatched types +from = 'url(../resources/blue-100.png), none'; +to = 'url(../resources/stripes-100.png), url(../resources/green-100.png)'; +test_interpolation({ + property: 'background-image', + from: from, + to: to, +}, [ + {at: -0.3, expect: from}, + {at: 0, expect: from}, + {at: 0.3, expect: from}, + {at: 0.6, expect: to}, + {at: 1, expect: to}, + {at: 1.5, expect: to}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-position-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-interpolation.html new file mode 100644 index 0000000000..2e7f2e24a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-interpolation.html @@ -0,0 +1,137 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> +<meta name="test" content="background-position supports animation as a repeatable list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-position: 60px 60px; +} +.target { + width: 120px; + height: 120px; + display: inline-block; + border: 2px solid black; + background-repeat: no-repeat; + background-image: radial-gradient(20px circle at 20px 20px, red 18px, transparent), + radial-gradient(20px circle at 20px 20px, yellow 18px, transparent), + radial-gradient(20px circle at 20px 20px, lime 18px, transparent), + radial-gradient(20px circle at 20px 20px, blue 18px, transparent); + background-position: 40px 40px; +} +.expected { + margin-right: 10px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'background-position', + from: neutralKeyframe, + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '30px 30px, 30px 30px, 30px 30px, 30px 30px'}, + {at: 0, expect: '40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.25, expect: '50px 50px, 50px 50px, 50px 50px, 50px 50px'}, + {at: 0.5, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 0.75, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'}, + {at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '90px 90px, 90px 90px, 90px 90px, 90px 90px'}, +]); + +// background-position's initial value is 0% 0%, and calcs involving percentages +// are never resolved by the calc spec (even when the percentage is 0%). +test_interpolation({ + property: 'background-position', + from: 'initial', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: 'calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px)'}, + {at: 0, expect: '0% 0%, 0% 0%, 0% 0%, 0% 0%'}, + {at: 0.25, expect: 'calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px)'}, + {at: 0.5, expect: 'calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px)'}, + {at: 0.75, expect: 'calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px)'}, + {at: 1, expect: 'calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px)'}, + {at: 1.25, expect: 'calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px)'}, +]); + +test_interpolation({ + property: 'background-position', + from: 'inherit', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '55px 55px, 55px 55px, 55px 55px, 55px 55px'}, + {at: 0, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 0.25, expect: '65px 65px, 65px 65px, 65px 65px, 65px 65px'}, + {at: 0.5, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'}, + {at: 0.75, expect: '75px 75px, 75px 75px, 75px 75px, 75px 75px'}, + {at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '85px 85px, 85px 85px, 85px 85px, 85px 85px'}, +]); + +// background-position is not inherited, so 'unset' is equivalent to initial. +test_interpolation({ + property: 'background-position', + from: 'unset', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: 'calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px)'}, + {at: 0, expect: '0% 0%, 0% 0%, 0% 0%, 0% 0%'}, + {at: 0.25, expect: 'calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px)'}, + {at: 0.5, expect: 'calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px)'}, + {at: 0.75, expect: 'calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px)'}, + {at: 1, expect: 'calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px)'}, + {at: 1.25, expect: 'calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px)'}, +]); + +// Test equal number of position values as background images. +test_interpolation({ + property: 'background-position', + from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +// Test single position value repeated over background images. +test_interpolation({ + property: 'background-position', + from: 'top 0px left 0px', + to: 'left 80px top 80px', +}, [ + {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +// Test mismatched numbers of position values. +test_interpolation({ + property: 'background-position', + from: '0px 0px, 80px 0px', + to: '40px 40px, 80px 80px, 0px 80px', +}, [ + {at: -0.25, expect: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, + {at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, + {at: 0.25, expect: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, + {at: 0.5, expect: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, + {at: 0.75, expect: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, + {at: 1, expect: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, + {at: 1.25, expect: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-position-origin-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-origin-interpolation.html new file mode 100644 index 0000000000..f34145c573 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-origin-interpolation.html @@ -0,0 +1,217 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> +<meta name="test" content="background-position animation handles origin parameters"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-position: 80px 80px; +} +.target { + border: 3px solid skyblue; + width: 100px; + height: 100px; + background-image: linear-gradient(to right, green, green); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: 10px 10px; + display: inline-block; +} + +.actual { + background-image: linear-gradient(to right, red, red); +} +.expected { + margin-left: -106px; +} +</style> + +<body></body> + +<script> +// neutral +test_interpolation({ + property: 'background-position', + from: neutralKeyframe, + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '10px 10px'}, + {at: 0.25, expect: '12.5px 12.5px'}, + {at: 0.5, expect: '15px 15px'}, + {at: 0.75, expect: '17.5px 17.5px'}, + {at: 1, expect: '20px 20px'}, +]); + +// initial +test_interpolation({ + property: 'background-position', + from: 'initial', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '0% 0%'}, + {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, + {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, + {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, + {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, +]); + +// inherit +test_interpolation({ + property: 'background-position', + from: 'inherit', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '80px 80px'}, + {at: 0.25, expect: '65px 65px'}, + {at: 0.5, expect: '50px 50px'}, + {at: 0.75, expect: '35px 35px'}, + {at: 1, expect: '20px 20px'}, +]); + +// unset +test_interpolation({ + property: 'background-position', + from: 'unset', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '0% 0%'}, + {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, + {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, + {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, + {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, +]); + +// left-top +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(5px + 37.5%) calc(5px + 37.5%)'}, + {at: 0.5, expect: 'calc(10px + 25%) calc(10px + 25%)'}, + {at: 0.75, expect: 'calc(15px + 12.5%) calc(15px + 12.5%)'}, + {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, +]); + +// center-top +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'center top 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% calc(5px + 37.5%)'}, + {at: 0.5, expect: '50% calc(10px + 25%)'}, + {at: 0.75, expect: '50% calc(15px + 12.5%)'}, + {at: 1, expect: '50% calc(0% + 20px)'}, +]); + +// right-top +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'right 20px top 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(-5px + 62.5%) calc(5px + 37.5%)'}, + {at: 0.5, expect: 'calc(-10px + 75%) calc(10px + 25%)'}, + {at: 0.75, expect: 'calc(-15px + 87.5%) calc(15px + 12.5%)'}, + {at: 1, expect: 'calc(-20px + 100%) calc(0% + 20px)'}, +]); + +// left-center +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'left 20px center', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(5px + 37.5%) 50%'}, + {at: 0.5, expect: 'calc(10px + 25%) 50%'}, + {at: 0.75, expect: 'calc(15px + 12.5%) 50%'}, + {at: 1, expect: 'calc(0% + 20px) 50%'}, +]); + +// center-center +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'center center', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% 50%'}, + {at: 0.5, expect: '50% 50%'}, + {at: 0.75, expect: '50% 50%'}, + {at: 1, expect: '50% 50%'}, +]); + +// right-center +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'right 20px center', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(-5px + 62.5%) 50%'}, + {at: 0.5, expect: 'calc(-10px + 75%) 50%'}, + {at: 0.75, expect: 'calc(-15px + 87.5%) 50%'}, + {at: 1, expect: 'calc(-20px + 100%) 50%'}, +]); + +// left-bottom +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'left 20px bottom 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(5px + 37.5%) calc(-5px + 62.5%)'}, + {at: 0.5, expect: 'calc(10px + 25%) calc(-10px + 75%)'}, + {at: 0.75, expect: 'calc(15px + 12.5%) calc(-15px + 87.5%)'}, + {at: 1, expect: 'calc(0% + 20px) calc(-20px + 100%)'}, +]); + +// center-bottom +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'center bottom 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% calc(-5px + 62.5%)'}, + {at: 0.5, expect: '50% calc(-10px + 75%)'}, + {at: 0.75, expect: '50% calc(-15px + 87.5%)'}, + {at: 1, expect: '50% calc(-20px + 100%)'}, +]); + +// right-bottom +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'right 20px bottom 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'}, + {at: 0.5, expect: 'calc(-10px + 75%) calc(-10px + 75%)'}, + {at: 0.75, expect: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, + {at: 1, expect: 'calc(-20px + 100%) calc(-20px + 100%)'}, +]); + +// Single values +test_interpolation({ + property: 'background-position', + from: 'center', + to: 'bottom', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% 62.5%'}, + {at: 0.5, expect: '50% 75%'}, + {at: 0.75, expect: '50% 87.5%'}, + {at: 1, expect: '50% 100%'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-position-x-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-x-interpolation.html new file mode 100644 index 0000000000..a66c1ea078 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-x-interpolation.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> +<meta name="test" content="background-position-x supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-position-x: 60px; +} + +.target { + background-position-x: 40px; +} +</style> + +<body> +<script> +test_interpolation({ + property: 'background-position-x', + from: neutralKeyframe, + to: '80px', +}, [ + {at: -0.25, expect: '30px'}, + {at: 0, expect: '40px'}, + {at: 0.25, expect: '50px'}, + {at: 0.5, expect: '60px'}, + {at: 0.75, expect: '70px'}, + {at: 1, expect: '80px'}, + {at: 1.25, expect: '90px'}, +]); + +test_interpolation({ + property: 'background-position-x', + from: 'initial', + to: 'right', +}, [ + {at: -0.25, expect: '-25%'}, + {at: 0, expect: '0%'}, + {at: 0.25, expect: '25%'}, + {at: 0.5, expect: '50%'}, + {at: 0.75, expect: '75%'}, + {at: 1, expect: '100%'}, + {at: 1.25, expect: '125%'}, +]); + +test_interpolation({ + property: 'background-position-x', + from: 'inherit', + to: '80px', +}, [ + {at: -0.25, expect: '55px'}, + {at: 0, expect: '60px'}, + {at: 0.25, expect: '65px'}, + {at: 0.5, expect: '70px'}, + {at: 0.75, expect: '75px'}, + {at: 1, expect: '80px'}, + {at: 1.25, expect: '85px'}, +]); + +test_interpolation({ + property: 'background-position-x', + from: '300px, 400px', + to: '500px, 600px, 700px', +}, [ + {at: -0.25, expect: '250px, 350px, 200px, 375px, 225px, 325px'}, + {at: 0, expect: '300px, 400px, 300px, 400px, 300px, 400px'}, + {at: 0.25, expect: '350px, 450px, 400px, 425px, 375px, 475px'}, + {at: 0.5, expect: '400px, 500px, 500px, 450px, 450px, 550px'}, + {at: 0.75, expect: '450px, 550px, 600px, 475px, 525px, 625px'}, + {at: 1, expect: '500px, 600px, 700px, 500px, 600px, 700px'}, + {at: 1.25, expect: '550px, 650px, 800px, 525px, 675px, 775px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-position-y-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-y-interpolation.html new file mode 100644 index 0000000000..c272a71226 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-y-interpolation.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> +<meta name="test" content="background-position-y supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-position-y: 60px; +} + +.target { + background-position-y: 40px; +} +</style> + +<body> +<script> +test_interpolation({ + property: 'background-position-y', + from: neutralKeyframe, + to: '80px', +}, [ + {at: -0.25, expect: '30px'}, + {at: 0, expect: '40px'}, + {at: 0.25, expect: '50px'}, + {at: 0.5, expect: '60px'}, + {at: 0.75, expect: '70px'}, + {at: 1, expect: '80px'}, + {at: 1.25, expect: '90px'}, +]); + +test_interpolation({ + property: 'background-position-y', + from: 'initial', + to: 'bottom', +}, [ + {at: -0.25, expect: '-25%'}, + {at: 0, expect: '0%'}, + {at: 0.25, expect: '25%'}, + {at: 0.5, expect: '50%'}, + {at: 0.75, expect: '75%'}, + {at: 1, expect: '100%'}, + {at: 1.25, expect: '125%'}, +]); + +test_interpolation({ + property: 'background-position-y', + from: 'inherit', + to: '80px', +}, [ + {at: -0.25, expect: '55px'}, + {at: 0, expect: '60px'}, + {at: 0.25, expect: '65px'}, + {at: 0.5, expect: '70px'}, + {at: 0.75, expect: '75px'}, + {at: 1, expect: '80px'}, + {at: 1.25, expect: '85px'}, +]); + +test_interpolation({ + property: 'background-position-y', + from: '300px, 400px', + to: '500px, 600px, 700px', +}, [ + {at: -0.25, expect: '250px, 350px, 200px, 375px, 225px, 325px'}, + {at: 0, expect: '300px, 400px, 300px, 400px, 300px, 400px'}, + {at: 0.25, expect: '350px, 450px, 400px, 425px, 375px, 475px'}, + {at: 0.5, expect: '400px, 500px, 500px, 450px, 450px, 550px'}, + {at: 0.75, expect: '450px, 550px, 600px, 475px, 525px, 625px'}, + {at: 1, expect: '500px, 600px, 700px, 500px, 600px, 700px'}, + {at: 1.25, expect: '550px, 650px, 800px, 525px, 675px, 775px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-size-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-size-interpolation.html new file mode 100644 index 0000000000..f6a480c7bd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-size-interpolation.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size"> +<meta name="test" content="background-size supports animation as a repeatable list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-size: 100px 100px; +} +.target { + width: 80px; + height: 100px; + display: inline-block; + border: 10px solid black; + background-repeat: no-repeat; + background-image: url(../resources/stripes-100.png), + url(../resources/stripes-100.png), + url(../resources/blue-100.png), + url(../resources/green-100.png); + background-position: left top, right top, left bottom, right bottom; + background-size: 10px 10px; +} +.expected { + margin-right: 10px; + border-color: green; +} +</style> + +<body></body> + +<script> +// neutral +test_interpolation({ + property: 'background-size', + from: neutralKeyframe, + to: '20px 20px, 0px 0px', +}, [ + {at: -0.25, expect: ' 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px'}, + {at: 0, expect: '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'}, + {at: 0.25, expect: '12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px'}, + {at: 0.5, expect: '15.0px 15.0px, 5.0px 5.0px, 15.0px 15.0px, 5.0px 5.0px'}, + {at: 0.75, expect: '17.5px 17.5px, 2.5px 2.5px, 17.5px 17.5px, 2.5px 2.5px'}, + {at: 1, expect: '20.0px 20.0px, 0.0px 0.0px, 20.0px 20.0px, 0.0px 0.0px'}, + {at: 1.25, expect: '22.5px 22.5px, 0.0px 0.0px, 22.5px 22.5px, 0.0px 0.0px'}, +]); + +// initial +test_no_interpolation({ + property: 'background-size', + from: 'initial', + to: '20px 20px, 0px 0px', +}); + +// inherit +test_interpolation({ + property: 'background-size', + from: 'inherit', + to: '20px 20px, 0px 0px', +}, [ + {at: -0.25, expect: '120px 120px, 125px 125px, 120px 120px, 125px 125px'}, + {at: 0, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, + {at: 0.25, expect: ' 80px 80px, 75px 75px, 80px 80px, 75px 75px'}, + {at: 0.5, expect: ' 60px 60px, 50px 50px, 60px 60px, 50px 50px'}, + {at: 0.75, expect: ' 40px 40px, 25px 25px, 40px 40px, 25px 25px'}, + {at: 1, expect: ' 20px 20px, 0px 0px, 20px 20px, 0px 0px'}, + {at: 1.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, +]); + +// unset +test_no_interpolation({ + property: 'background-size', + from: 'unset', + to: '20px 20px, 0px 0px', +}); + +// Matched keywords in size value list. +test_interpolation({ + property: 'background-size', + from: '0px auto, 0px 0px, contain, cover', + to: '40px auto, 40px 40px, contain, cover', +}, [ + {at: -0.25, expect: ' 0px auto, 0px 0px, contain, cover'}, + {at: 0, expect: ' 0px auto, 0px 0px, contain, cover'}, + {at: 0.25, expect: '10px auto, 10px 10px, contain, cover'}, + {at: 0.5, expect: '20px auto, 20px 20px, contain, cover'}, + {at: 0.75, expect: '30px auto, 30px 30px, contain, cover'}, + {at: 1, expect: '40px auto, 40px 40px, contain, cover'}, + {at: 1.25, expect: '50px auto, 50px 50px, contain, cover'}, +]); + +// Mismatched keywords in size value list. +test_no_interpolation({ + property: 'background-size', + from: '0px 0px, 0px 0px, contain, cover', + to: '40px 40px, 40px 40px, cover, contain', +}); + +test_no_interpolation({ + property: 'background-size', + from: '0px auto, 0px 0px', + to: 'auto 40px, 40px 40px', +}); + +// Equal number of size values as background images. +test_interpolation({ + property: 'background-size', + from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', + to: '20px 20px, 40px 40px, 60px 60px, 100px 100px', +}, [ + {at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 5px 5px, 10px 10px, 15px 15px, 25px 25px'}, + {at: 0.5, expect: '10px 10px, 20px 20px, 30px 30px, 50px 50px'}, + {at: 0.75, expect: '15px 15px, 30px 30px, 45px 45px, 75px 75px'}, + {at: 1, expect: '20px 20px, 40px 40px, 60px 60px, 100px 100px'}, + {at: 1.25, expect: '25px 25px, 50px 50px, 75px 75px, 125px 125px'}, +]); + +// Single size value repeated over background images. +test_interpolation({ + property: 'background-size', + from: '0px 0px', + to: '80px 80px', +}, [ + {at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +test_interpolation({ + property: 'background-size', + from: '0px', + to: '80px', +}, [ + {at: -0.25, expect: ' 0px, 0px, 0px, 0px'}, + {at: 0, expect: ' 0px, 0px, 0px, 0px'}, + {at: 0.25, expect: ' 20px, 20px, 20px, 20px'}, + {at: 0.5, expect: ' 40px, 40px, 40px, 40px'}, + {at: 0.75, expect: ' 60px, 60px, 60px, 60px'}, + {at: 1, expect: ' 80px, 80px, 80px, 80px'}, + {at: 1.25, expect: '100px, 100px, 100px, 100px'}, +]); + +// Mismatched numbers of size values. +test_interpolation({ + property: 'background-size', + from: '0px 0px, 80px 0px', + to: '40px 40px, 80px 80px, 0px 80px', +}, [ + {at: -0.25, expect: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'}, + {at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, + {at: 0.25, expect: '10px 10px, 80px 20px, 0px 20px, 70px 10px'}, + {at: 0.5, expect: '20px 20px, 80px 40px, 0px 40px, 60px 20px'}, + {at: 0.75, expect: '30px 30px, 80px 60px, 0px 60px, 50px 30px'}, + {at: 1, expect: '40px 40px, 80px 80px, 0px 80px, 40px 40px'}, + {at: 1.25, expect: '50px 50px, 80px 100px, 0px 100px, 30px 50px'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-left-radius-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-left-radius-composition.html new file mode 100644 index 0000000000..87042d1969 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-left-radius-composition.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-bottom-left-radius composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius"> +<meta name="assert" content="border-bottom-left-radius supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-bottom-left-radius', + underlying: '40px 40px', + addFrom: '60px 60px', + addTo: '160px 160px', +}, [ + {at: -0.25, expect: '75px'}, + {at: 0, expect: '100px'}, + {at: 0.25, expect: '125px'}, + {at: 0.5, expect: '150px'}, + {at: 0.75, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px'}, +]); + +test_composition({ + property: 'border-bottom-left-radius', + underlying: '40px 140px', + replaceFrom: '100px 120px', + addTo: '160px 60px', +}, [ + {at: -0.25, expect: '75px 100px'}, + {at: 0, expect: '100px 120px'}, + {at: 0.25, expect: '125px 140px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 180px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px 220px'}, +]); + +test_composition({ + property: 'border-bottom-left-radius', + underlying: '40px 60px', + addFrom: '60px 140px', + replaceTo: '200px 120px', +}, [ + {at: -0.25, expect: '75px 220px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 180px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 140px'}, + {at: 1, expect: '200px 120px'}, + {at: 1.25, expect: '225px 100px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-right-radius-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-right-radius-composition.html new file mode 100644 index 0000000000..2b5a72df69 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-right-radius-composition.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-bottom-right-radius composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius"> +<meta name="assert" content="border-bottom-right-radius supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-bottom-right-radius', + underlying: '40px 40px', + addFrom: '60px 60px', + addTo: '160px 160px', +}, [ + {at: -0.25, expect: '75px'}, + {at: 0, expect: '100px'}, + {at: 0.25, expect: '125px'}, + {at: 0.5, expect: '150px'}, + {at: 0.75, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px'}, +]); + +test_composition({ + property: 'border-bottom-right-radius', + underlying: '40px 140px', + replaceFrom: '100px 120px', + addTo: '160px 60px', +}, [ + {at: -0.25, expect: '75px 100px'}, + {at: 0, expect: '100px 120px'}, + {at: 0.25, expect: '125px 140px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 180px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px 220px'}, +]); + +test_composition({ + property: 'border-bottom-right-radius', + underlying: '40px 60px', + addFrom: '60px 140px', + replaceTo: '200px 120px', +}, [ + {at: -0.25, expect: '75px 220px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 180px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 140px'}, + {at: 1, expect: '200px 120px'}, + {at: 1.25, expect: '225px 100px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-width-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-width-composition.html new file mode 100644 index 0000000000..5377c0ab42 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-bottom-width-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-bottom-width composition</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties"> +<meta name="assert" content="border-bottom-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-bottom-width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'border-bottom-width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'border-bottom-width', + underlying: '10em', + addFrom: '100px', + addTo: '20em', +}, [ + {at: -0.3, expect: 'calc(130px + 4em)'}, + {at: 0, expect: 'calc(100px + 10em)'}, + {at: 0.5, expect: 'calc(50px + 20em)'}, + {at: 1, expect: '30em'}, + {at: 1.5, expect: 'calc(-50px + 40em)'}, +]); + +test_composition({ + property: 'border-bottom-width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-color-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-color-interpolation.html new file mode 100644 index 0000000000..3e7843b8a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-color-interpolation.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-color interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-color"> +<meta name="assert" content="border-color supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-color: white; +} +.target { + width: 50px; + height: 50px; + background-color: blue; + display: inline-block; + border: 12px solid; + border-color: darkblue; +} +.expected { + background-color: green; + margin-right: 2px; +} +</style> + +<body></body> + +<script> +// As per https://bugzilla.mozilla.org/show_bug.cgi?id=137688, Firefox does not +// support getComputedStyle for shorthands. As such, we have one test for this +// which explicitly checks the shorthand variant, but most tests use one of the +// longhands instead. +function compareNotEmpty(actual, expected) { + assert_equals(actual, expected); + assert_not_equals(actual, ''); +} + +test_interpolation({ + property: 'border-color', + from: 'rgb(20, 30, 40) rgb(40, 50, 60)', + to: 'rgb(10, 20, 30) rgb(40, 50, 60) rgb(30, 40, 50) rgb(50, 60, 70)', + comparisonFunction: compareNotEmpty, +}, [ + {at: -0.3, expect: 'rgb(23, 33, 43) rgb(40, 50, 60) rgb(17, 27, 37) rgb(37, 47, 57)'}, + {at: 0, expect: 'rgb(20, 30, 40) rgb(40, 50, 60)'}, + {at: 0.3, expect: 'rgb(17, 27, 37) rgb(40, 50, 60) rgb(23, 33, 43) rgb(43, 53, 63)'}, + {at: 0.6, expect: 'rgb(14, 24, 34) rgb(40, 50, 60) rgb(26, 36, 46) rgb(46, 56, 66)'}, + {at: 1, expect: 'rgb(10, 20, 30) rgb(40, 50, 60) rgb(30, 40, 50) rgb(50, 60, 70)'}, + {at: 1.5, expect: 'rgb(5, 15, 25) rgb(40, 50, 60) rgb(35, 45, 55) rgb(55, 65, 75)'}, +]); + +test_interpolation({ + property: 'border-top-color', + from: neutralKeyframe, + to: 'orange', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 181)'}, + {at: 0, expect: 'rgb(0, 0, 139)'}, + {at: 0.3, expect: 'rgb(77, 50, 97)'}, + {at: 0.6, expect: 'rgb(153, 99, 56)'}, + {at: 1, expect: 'rgb(255, 165, 0)'}, + {at: 1.5, expect: 'rgb(255, 248, 0)'}, +]); + +test_interpolation({ + property: 'border-top-color', + from: 'initial', + to: 'orange', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(77, 50, 0)'}, + {at: 0.6, expect: 'rgb(153, 99, 0)'}, + {at: 1, expect: 'rgb(255, 165, 0)'}, + {at: 1.5, expect: 'rgb(255, 248, 0)'}, +]); + +test_interpolation({ + property: 'border-top-color', + from: 'inherit', + to: 'orange', +}, [ + {at: -0.3, expect: 'rgb(255, 255, 255)'}, + {at: 0, expect: 'rgb(255, 255, 255)'}, + {at: 0.3, expect: 'rgb(255, 228, 179)'}, + {at: 0.6, expect: 'rgb(255, 201, 102)'}, + {at: 1, expect: 'rgb(255, 165, 0)'}, + {at: 1.5, expect: 'rgb(255, 120, 0)'}, +]); + +test_interpolation({ + property: 'border-top-color', + from: 'unset', + to: 'orange', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(77, 50, 0)'}, + {at: 0.6, expect: 'rgb(153, 99, 0)'}, + {at: 1, expect: 'rgb(255, 165, 0)'}, + {at: 1.5, expect: 'rgb(255, 248, 0)'}, +]); + +test_interpolation({ + property: 'border-top-color', + from: 'white', + to: 'orange' +}, [ + {at: -0.3, expect: 'white'}, + {at: 0, expect: 'white'}, + {at: 0.3, expect: 'rgb(255, 228, 179)'}, + {at: 0.6, expect: 'rgb(255, 201, 102)'}, + {at: 1, expect: 'orange'}, + {at: 1.5, expect: 'rgb(255, 120, 0)'}, +]); + +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-outset-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-outset-composition.html new file mode 100644 index 0000000000..e331171175 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-outset-composition.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-outset composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset"> +<meta name="assert" content="border-image-outset supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-image-outset', + underlying: '1 2 3 4', + addFrom: '1 2 3 4', + addTo: '101 102 103 104', +}, [ + {at: -0.25, expect: '0'}, // Non-negative. + {at: 0, expect: '2 4 6 8'}, + {at: 0.25, expect: '27 29 31 33'}, + {at: 0.5, expect: '52 54 56 58'}, + {at: 0.75, expect: '77 79 81 83'}, + {at: 1, expect: '102 104 106 108'}, + {at: 1.25, expect: '127 129 131 133'}, +]); + +test_composition({ + property: 'border-image-outset', + underlying: '100 200 300 400', + addFrom: '100', + addTo: '200 300 500', +}, [ + {at: -0.25, expect: '175 250 300 450'}, + {at: 0, expect: '200 300 400 500'}, + {at: 0.25, expect: '225 350 500 550'}, + {at: 0.5, expect: '250 400 600 600'}, + {at: 0.75, expect: '275 450 700 650'}, + {at: 1, expect: '300 500 800 700'}, + {at: 1.25, expect: '325 550 900 750'}, +]); + +test_composition({ + property: 'border-image-outset', + underlying: '1 2 3px 4px', + addFrom: '1 2 3px 4px', + addTo: '101 102 103px 104px', +}, [ + {at: -0.25, expect: '0 0 0px 0px'}, // Non-negative. + {at: 0, expect: '2 4 6px 8px'}, + {at: 0.25, expect: '27 29 31px 33px'}, + {at: 0.5, expect: '52 54 56px 58px'}, + {at: 0.75, expect: '77 79 81px 83px'}, + {at: 1, expect: '102 104 106px 108px'}, + {at: 1.25, expect: '127 129 131px 133px'}, +]); + +test_composition({ + property: 'border-image-outset', + underlying: '10px 20px', + addFrom: '190px 180px 290px 280px', + addTo: '90px 80px', +}, [ + {at: -0.25, expect: '225px 225px 350px 350px'}, + {at: 0, expect: '200px 200px 300px 300px'}, + {at: 0.25, expect: '175px 175px 250px 250px'}, + {at: 0.5, expect: '150px 150px 200px 200px'}, + {at: 0.75, expect: '125px 125px 150px 150px'}, + {at: 1, expect: '100px'}, + {at: 1.25, expect: '75px 75px 50px 50px'}, +]); + +test_composition({ + property: 'border-image-outset', + underlying: '10 20px', + replaceFrom: '100 100px', + addTo: '190 180px', +}, [ + {at: -0.25, expect: '75 75px'}, + {at: 0, expect: '100 100px'}, + {at: 0.25, expect: '125 125px'}, + {at: 0.5, expect: '150 150px'}, + {at: 0.75, expect: '175 175px'}, + {at: 1, expect: '200 200px'}, + {at: 1.25, expect: '225 225px'}, +]); + +test_composition({ + property: 'border-image-outset', + underlying: '10px 20', + addFrom: '90px 80', + replaceTo: '0px 0 0px 0', +}, [ + {at: -0.25, expect: '125px 125'}, + {at: 0, expect: '100px 100'}, + {at: 0.25, expect: '75px 75'}, + {at: 0.5, expect: '50px 50'}, + {at: 0.75, expect: '25px 25'}, + {at: 1, expect: '0px 0'}, + {at: 1.25, expect: '0px 0'}, // Non-negative. +]); + +test_composition({ + property: 'border-image-outset', + underlying: '10 20', + addFrom: '100px 150px', + addTo: '200px 250px', +}, [ + {at: -0.25, expect: '75px 125px'}, + {at: 0, expect: '100px 150px'}, + {at: 0.25, expect: '125px 175px'}, + {at: 0.5, expect: '150px 200px'}, + {at: 0.75, expect: '175px 225px'}, + {at: 1, expect: '200px 250px'}, + {at: 1.25, expect: '225px 275px'}, +]); + +test_composition({ + property: 'border-image-outset', + underlying: '10 20', + addFrom: '100 150px', + addTo: '200px 250', +}, [ + {at: -0.25, expect: '100 150px'}, + {at: 0, expect: '100 150px'}, + {at: 0.25, expect: '100 150px'}, + {at: 0.5, expect: '200px 250'}, + {at: 0.75, expect: '200px 250'}, + {at: 1, expect: '200px 250'}, + {at: 1.25, expect: '200px 250'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-outset-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-outset-interpolation.html new file mode 100644 index 0000000000..aebadbbafb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-outset-interpolation.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-outset interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset"> +<meta name="assert" content="border-image-outset supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-image-outset: 10px; +} +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + border: 25px; + margin-right: 50px; + border-image-slice: 30%; + background-clip: content-box; + border-image-source: linear-gradient(45deg, pink, blue, white, black, green); + border-image-outset: 1px; +} +.expected { + background-color: green; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'border-image-outset', + from: neutralKeyframe, + to: '2px', +}, [ + {at: -0.3, expect: '0.7px'}, + {at: 0, expect: '1px'}, + {at: 0.3, expect: '1.3px'}, + {at: 0.6, expect: '1.6px'}, + {at: 1, expect: '2px'}, + {at: 1.5, expect: '2.5px'}, +]); + +test_interpolation({ + property: 'border-image-outset', + from: 'initial', + to: '2', +}, [ + {at: -0.3, expect: '0'}, // Non-negative + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.6'}, + {at: 0.6, expect: '1.2'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '3'}, +]); + +test_interpolation({ + property: 'border-image-outset', + from: 'inherit', + to: '2px', +}, [ + {at: -0.3, expect: '12.4px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '7.6px'}, + {at: 0.6, expect: '5.2px'}, + {at: 1, expect: '2px'}, + {at: 1.5, expect: '0px'}, +]); + +test_interpolation({ + property: 'border-image-outset', + from: 'unset', + to: '2', +}, [ + {at: -0.3, expect: '0'}, // Non-negative + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.6'}, + {at: 0.6, expect: '1.2'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '3'}, +]); + +test_interpolation({ + property: 'border-image-outset', + from: '0px', + to: '5px', +}, [ + {at: -0.3, expect: '0px'}, // Non-negative + {at: 0, expect: '0px'}, + {at: 0.3, expect: '1.5px'}, + {at: 0.6, expect: '3px'}, + {at: 1, expect: '5px'}, + {at: 1.5, expect: '7.5px'}, +]); + +test_interpolation({ + property: 'border-image-outset', + from: '0', + to: '1', +}, [ + {at: -0.3, expect: '0'}, // Non-negative + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.3'}, + {at: 0.6, expect: '0.6'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '1.5'}, +]); + +test_interpolation({ + property: 'border-image-outset', + from: '1 2 3px 4px', + to: '101 102 103px 104px', +}, [ + {at: -0.3, expect: '0 0 0px 0px'}, // Non-negative + {at: 0, expect: '1 2 3px 4px'}, + {at: 0.3, expect: '31 32 33px 34px'}, + {at: 0.6, expect: '61 62 63px 64px'}, + {at: 1, expect: '101 102 103px 104px'}, + {at: 1.5, expect: '151 152 153px 154px'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-composition.html new file mode 100644 index 0000000000..d0ccb1a3a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-composition.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-slice composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice"> +<meta name="assert" content="border-image-slice supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-image-slice', + underlying: '1 2 3 4', + addFrom: '1 2 3 4', + addTo: '101 102 103 104', +}, [ + {at: -0.25, expect: '0'}, // Non-negative. + {at: 0, expect: '2 4 6 8'}, + {at: 0.25, expect: '27 29 31 33'}, + {at: 0.5, expect: '52 54 56 58'}, + {at: 0.75, expect: '77 79 81 83'}, + {at: 1, expect: '102 104 106 108'}, + {at: 1.25, expect: '127 129 131 133'}, +]); + +test_composition({ + property: 'border-image-slice', + underlying: '100 200 300 400 fill', + addFrom: '100 fill', + addTo: '200 300 500 fill', +}, [ + {at: -0.25, expect: '175 250 300 450 fill'}, + {at: 0, expect: '200 300 400 500 fill'}, + {at: 0.25, expect: '225 350 500 550 fill'}, + {at: 0.5, expect: '250 400 600 600 fill'}, + {at: 0.75, expect: '275 450 700 650 fill'}, + {at: 1, expect: '300 500 800 700 fill'}, + {at: 1.25, expect: '325 550 900 750 fill'}, +]); + +test_composition({ + property: 'border-image-slice', + underlying: '1 2 3% 4%', + addFrom: '1 2 3% 4%', + addTo: '101 102 103% 104%', +}, [ + {at: -0.25, expect: '0 0 0% 0%'}, // Non-negative. + {at: 0, expect: '2 4 6% 8%'}, + {at: 0.25, expect: '27 29 31% 33%'}, + {at: 0.5, expect: '52 54 56% 58%'}, + {at: 0.75, expect: '77 79 81% 83%'}, + {at: 1, expect: '102 104 106% 108%'}, + {at: 1.25, expect: '127 129 131% 133%'}, +]); + +test_composition({ + property: 'border-image-slice', + underlying: '10% 20%', + addFrom: '190% 180% 290% 280%', + addTo: '90% 80%', +}, [ + {at: -0.25, expect: '225% 225% 350% 350%'}, + {at: 0, expect: '200% 200% 300% 300%'}, + {at: 0.25, expect: '175% 175% 250% 250%'}, + {at: 0.5, expect: '150% 150% 200% 200%'}, + {at: 0.75, expect: '125% 125% 150% 150%'}, + {at: 1, expect: '100%'}, + {at: 1.25, expect: '75% 75% 50% 50%'}, +]); + +test_composition({ + property: 'border-image-slice', + underlying: '10 20%', + replaceFrom: '100 100%', + addTo: '190 180%', +}, [ + {at: -0.25, expect: '75 75%'}, + {at: 0, expect: '100 100%'}, + {at: 0.25, expect: '125 125%'}, + {at: 0.5, expect: '150 150%'}, + {at: 0.75, expect: '175 175%'}, + {at: 1, expect: '200 200%'}, + {at: 1.25, expect: '225 225%'}, +]); + +test_composition({ + property: 'border-image-slice', + underlying: '10% 20', + addFrom: '90% 80', + replaceTo: '0% 0 0% 0', +}, [ + {at: -0.25, expect: '125% 125'}, + {at: 0, expect: '100% 100'}, + {at: 0.25, expect: '75% 75'}, + {at: 0.5, expect: '50% 50'}, + {at: 0.75, expect: '25% 25'}, + {at: 1, expect: '0% 0'}, + {at: 1.25, expect: '0% 0'}, // Non-negative. +]); + +test_composition({ + property: 'border-image-slice', + underlying: '10 20', + addFrom: '100% 150%', + addTo: '200% 250% fill', +}, [ + {at: -0.25, expect: '100% 150%'}, + {at: 0, expect: '100% 150%'}, + {at: 0.25, expect: '100% 150%'}, + {at: 0.5, expect: '200% 250% fill'}, + {at: 0.75, expect: '200% 250% fill'}, + {at: 1, expect: '200% 250% fill'}, + {at: 1.25, expect: '200% 250% fill'}, +]); + +test_composition({ + property: 'border-image-slice', + underlying: '10 20', + addFrom: '100 150%', + addTo: '200% 250', +}, [ + {at: -0.25, expect: '100 150%'}, + {at: 0, expect: '100 150%'}, + {at: 0.25, expect: '100 150%'}, + {at: 0.5, expect: '200% 250'}, + {at: 0.75, expect: '200% 250'}, + {at: 1, expect: '200% 250'}, + {at: 1.25, expect: '200% 250'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-interpolation-stability.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-interpolation-stability.html new file mode 100644 index 0000000000..26431334e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-interpolation-stability.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-slice interpolation stability</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="target"></div> +<script> +test(function() { + var player = target.animate([ + {borderImageSlice: '50'}, + {borderImageSlice: '50'}, + ], { + duration: 1, + fill: 'forwards', + easing: 'cubic-bezier(0, 1.5, 1, 1.5)', + }); + player.pause(); + player.currentTime = 0.6345195996109396 + assert_equals(getComputedStyle(target).borderImageSlice, '50'); +}); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-interpolation.html new file mode 100644 index 0000000000..60301e755b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-slice-interpolation.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-slice interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice"> +<meta name="assert" content="border-image-slice supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-image-slice: 50%; +} +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + border: 25px; + border-image-source: linear-gradient(45deg, red, blue, green); + border-image-slice: 20%; +} +.expected { + background-color: green; + margin-right: 2px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'border-image-slice', + from: neutralKeyframe, + to: '10%', +}, [ + {at: -0.3, expect: '23%'}, + {at: 0, expect: '20%'}, + {at: 0.3, expect: '17%'}, + {at: 0.5, expect: '15%'}, + {at: 0.6, expect: '14%'}, + {at: 1, expect: '10%'}, + {at: 1.5, expect: '5%'}, +]); + +test_interpolation({ + property: 'border-image-slice', + from: 'initial', + to: '10%', +}, [ + {at: -0.3, expect: '127%'}, + {at: 0, expect: '100%'}, + {at: 0.3, expect: '73%'}, + {at: 0.5, expect: '55%'}, + {at: 0.6, expect: '46%'}, + {at: 1, expect: '10%'}, + {at: 1.5, expect: '0%'}, +]); + +test_interpolation({ + property: 'border-image-slice', + from: 'inherit', + to: '10%', +}, [ + {at: -0.3, expect: '62%'}, + {at: 0, expect: '50%'}, + {at: 0.3, expect: '38%'}, + {at: 0.5, expect: '30%'}, + {at: 0.6, expect: '26%'}, + {at: 1, expect: '10%'}, + {at: 1.5, expect: '0%'}, +]); + +test_interpolation({ + property: 'border-image-slice', + from: 'unset', + to: '10%', +}, [ + {at: -0.3, expect: '127%'}, + {at: 0, expect: '100%'}, + {at: 0.3, expect: '73%'}, + {at: 0.5, expect: '55%'}, + {at: 0.6, expect: '46%'}, + {at: 1, expect: '10%'}, + {at: 1.5, expect: '0%'}, +]); + +test_interpolation({ + property: 'border-image-slice', + from: '0%', + to: '50%', +}, [ + {at: -0.3, expect: '0%'}, // CSS border-image-slice can't be negative. + {at: 0, expect: '0%'}, + {at: 0.3, expect: '15%'}, + {at: 0.5, expect: '25%'}, + {at: 0.6, expect: '30%'}, + {at: 1, expect: '50%'}, + {at: 1.5, expect: '75%'}, +]); + +test_interpolation({ + property: 'border-image-slice', + from: '0% 10% 20% 30%', + to: '40% 50% 60% 70%', +}, [ + {at: -0.5, expect: '0% 0% 0% 10%'}, + {at: 0, expect: '0% 10% 20% 30%'}, + {at: 0.3, expect: '12% 22% 32% 42%'}, + {at: 0.5, expect: '20% 30% 40% 50%'}, + {at: 0.6, expect: '24% 34% 44% 54%'}, + {at: 1, expect: '40% 50% 60% 70%'}, + {at: 1.5, expect: '60% 70% 80% 90%'}, +]); + +test_interpolation({ + property: 'border-image-slice', + from: '0 10 20 30 fill', + to: '40 50 60 70 fill', +}, [ + {at: -0.5, expect: '0 0 0 10 fill'}, // CSS border-image-slice can't be negative. + {at: 0, expect: '0 10 20 30 fill'}, + {at: 0.3, expect: '12 22 32 42 fill'}, + {at: 0.5, expect: '20 30 40 50 fill'}, + {at: 0.6, expect: '24 34 44 54 fill'}, + {at: 1, expect: '40 50 60 70 fill'}, + {at: 1.5, expect: '60 70 80 90 fill'}, +]); + +test_interpolation({ + property: 'border-image-slice', + from: '0% 10 20% 30 fill', + to: '40% 50 60% 70 fill', +}, [ + {at: -0.5, expect: '0% 0 0% 10 fill'}, // CSS border-image-slice can't be negative. + {at: 0, expect: '0% 10 20% 30 fill'}, + {at: 0.3, expect: '12% 22 32% 42 fill'}, + {at: 0.5, expect: '20% 30 40% 50 fill'}, + {at: 0.6, expect: '24% 34 44% 54 fill'}, + {at: 1, expect: '40% 50 60% 70 fill'}, + {at: 1.5, expect: '60% 70 80% 90 fill'}, +]); + +test_no_interpolation({ + property: 'border-image-slice', + from: '0% fill', + to: '50%', +}); + +test_no_interpolation({ + property: 'border-image-slice', + from: '50%', + to: '100', +}); + +test_no_interpolation({ + property: 'border-image-slice', + from: '50% fill', + to: '100 fill', +}); + +test_no_interpolation({ + property: 'border-image-slice', + from: '0% 10 20% 30 fill', + to: '40% 50 60% 70', +}); + +test_no_interpolation({ + property: 'border-image-slice', + from: '0% 10 20 30 fill', + to: '40 50 60% 70', +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-source-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-source-interpolation.html new file mode 100644 index 0000000000..60dcfceddc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-source-interpolation.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-source interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-source"> +<meta name="assert" content="border-image-source has discrete animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-image-source: url(../support/green.png); +} +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + border: 5px solid aqua; + border-image-source: url(../support/blue_color.png); + border-image-slice: 10%; +} +.expected { + background-color: green; + margin-right: 2px; +} +</style> + +<body></body> + +<script> +// initial +test_no_interpolation({ + property: 'border-image-source', + from: 'initial', + to: 'url(../support/orange_color.png)', +}); + +// inherit +test_no_interpolation({ + property: 'border-image-source', + from: 'inherit', + to: 'url(../support/orange_color.png)', +}); + +// unset +test_no_interpolation({ + property: 'border-image-source', + from: 'unset', + to: 'url(../support/orange_color.png)', +}); + +// None to image +test_no_interpolation({ + property: 'border-image-source', + from: 'none', + to: 'url(../support/orange_color.png)', +}); + +// Image to image +test_no_interpolation({ + property: 'border-image-source', + from: 'url(../support/aqua_color.png)', + to: 'url(../support/orange_color.png)', +}); + +// Image to gradient +test_no_interpolation({ + property: 'border-image-source', + from: 'url(../support/aqua_color.png)', + to: 'linear-gradient(45deg, blue, orange)', +}); + +// Gradient to gradient +test_no_interpolation({ + property: 'border-image-source', + from: 'linear-gradient(-45deg, red, yellow)', + to: 'linear-gradient(45deg, blue, orange)', +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-width-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-width-composition.html new file mode 100644 index 0000000000..0d0a1dc4ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-width-composition.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-width composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-width"> +<meta name="assert" content="border-image-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-image-width', + underlying: '1 2 3 4', + addFrom: '1 2 3 4', + addTo: '101 102 103 104', +}, [ + {at: -0.25, expect: '0'}, // Non-negative. + {at: 0, expect: '2 4 6 8'}, + {at: 0.25, expect: '27 29 31 33'}, + {at: 0.5, expect: '52 54 56 58'}, + {at: 0.75, expect: '77 79 81 83'}, + {at: 1, expect: '102 104 106 108'}, + {at: 1.25, expect: '127 129 131 133'}, +]); + +test_composition({ + property: 'border-image-width', + underlying: '100 200 300 400', + addFrom: '100', + addTo: '200 300 500', +}, [ + {at: -0.25, expect: '175 250 300 450'}, + {at: 0, expect: '200 300 400 500'}, + {at: 0.25, expect: '225 350 500 550'}, + {at: 0.5, expect: '250 400 600 600'}, + {at: 0.75, expect: '275 450 700 650'}, + {at: 1, expect: '300 500 800 700'}, + {at: 1.25, expect: '325 550 900 750'}, +]); + +test_composition({ + property: 'border-image-width', + underlying: '1 2 3px 4%', + addFrom: '1 2 3px 4%', + addTo: '101 102 103px 104%', +}, [ + {at: -0.25, expect: '0 0 0px 0%'}, // Non-negative. + {at: 0, expect: '2 4 6px 8%'}, + {at: 0.25, expect: '27 29 31px 33%'}, + {at: 0.5, expect: '52 54 56px 58%'}, + {at: 0.75, expect: '77 79 81px 83%'}, + {at: 1, expect: '102 104 106px 108%'}, + {at: 1.25, expect: '127 129 131px 133%'}, +]); + +test_composition({ + property: 'border-image-width', + underlying: '10px 20px', + addFrom: '190px 180px 290px 280px', + addTo: '90px 80px', +}, [ + {at: -0.25, expect: '225px 225px 350px 350px'}, + {at: 0, expect: '200px 200px 300px 300px'}, + {at: 0.25, expect: '175px 175px 250px 250px'}, + {at: 0.5, expect: '150px 150px 200px 200px'}, + {at: 0.75, expect: '125px 125px 150px 150px'}, + {at: 1, expect: '100px'}, + {at: 1.25, expect: '75px 75px 50px 50px'}, +]); + +test_composition({ + property: 'border-image-width', + underlying: '10 20px', + replaceFrom: '100 100px', + addTo: '190 180px', +}, [ + {at: -0.25, expect: '75 75px'}, + {at: 0, expect: '100 100px'}, + {at: 0.25, expect: '125 125px'}, + {at: 0.5, expect: '150 150px'}, + {at: 0.75, expect: '175 175px'}, + {at: 1, expect: '200 200px'}, + {at: 1.25, expect: '225 225px'}, +]); + +test_composition({ + property: 'border-image-width', + underlying: '10px 20', + addFrom: '90px 80', + replaceTo: '0px 0 0px 0', +}, [ + {at: -0.25, expect: '125px 125'}, + {at: 0, expect: '100px 100'}, + {at: 0.25, expect: '75px 75'}, + {at: 0.5, expect: '50px 50'}, + {at: 0.75, expect: '25px 25'}, + {at: 1, expect: '0px 0'}, + {at: 1.25, expect: '0px 0'}, // Non-negative. +]); + +test_composition({ + property: 'border-image-width', + underlying: '10 20', + addFrom: '100px 150px', + addTo: '200px 250px', +}, [ + {at: -0.25, expect: '75px 125px'}, + {at: 0, expect: '100px 150px'}, + {at: 0.25, expect: '125px 175px'}, + {at: 0.5, expect: '150px 200px'}, + {at: 0.75, expect: '175px 225px'}, + {at: 1, expect: '200px 250px'}, + {at: 1.25, expect: '225px 275px'}, +]); + +test_composition({ + property: 'border-image-width', + underlying: '10 20', + addFrom: '100 150px', + addTo: '200% 250', +}, [ + {at: -0.25, expect: '100 150px'}, + {at: 0, expect: '100 150px'}, + {at: 0.25, expect: '100 150px'}, + {at: 0.5, expect: '200% 250'}, + {at: 0.75, expect: '200% 250'}, + {at: 1, expect: '200% 250'}, + {at: 1.25, expect: '200% 250'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-image-width-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-width-interpolation.html new file mode 100644 index 0000000000..ea138201b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-image-width-interpolation.html @@ -0,0 +1,192 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-image-width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-width"> +<meta name="assert" content="border-image-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-image-width: 100px; +} +.target { + width: 80px; + height: 80px; + background-color: black; + display: inline-block; + border: 10px; + border-image-source: linear-gradient(45deg, red, blue, green); + border-image-width: 10px; +} +.expected { + background-color: green; + margin-right: 2px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'border-image-width', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, + {at: 5, expect: '60px'}, + {at: 10, expect: '110px'}, +]); +test_no_interpolation({ + property: 'border-image-width', + from: 'initial', + to: '20px', +}); +test_interpolation({ + property: 'border-image-width', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '124px'}, + {at: 0, expect: '100px'}, + {at: 0.3, expect: '76px'}, + {at: 0.6, expect: '52px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '0px'}, + {at: 5, expect: '0px'}, + {at: 10, expect: '0px'}, +]); +test_no_interpolation({ + property: 'border-image-width', + from: 'unset', + to: '20px', +}); +test_interpolation({ + property: 'border-image-width', + from: '0px', + to: '20px' +}, [ + {at: -0.3, expect: '0px'}, // CSS border-image-width can't be negative. + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, + {at: 5, expect: '100px'}, + {at: 10, expect: '200px'} +]); +test_interpolation({ + property: 'border-image-width', + from: '0%', + to: '20%' +}, [ + {at: -0.3, expect: '0%'}, // CSS border-image-width can't be negative. + {at: 0, expect: '0%'}, + {at: 0.3, expect: '6%'}, + {at: 0.6, expect: '12%'}, + {at: 1, expect: '20%'}, + {at: 1.5, expect: '30%'}, + {at: 5, expect: '100%'}, + {at: 10, expect: '200%'} +]); +test_interpolation({ + property: 'border-image-width', + from: '0', + to: '20' +}, [ + {at: -0.3, expect: '0'}, // CSS border-image-width can't be negative. + {at: 0, expect: '0'}, + {at: 0.3, expect: '6'}, + {at: 0.6, expect: '12'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '30'}, + {at: 5, expect: '100'}, + {at: 10, expect: '200'} +]); +test_interpolation({ + property: 'border-image-width', + from: '10px 20% 30 40px', + to: '80px 70% 60 50px' +}, [ + {at: -0.3, expect: '0px 5% 21 37px'}, // CSS border-image-width can't be negative. + {at: 0, expect: '10px 20% 30 40px'}, + {at: 0.3, expect: '31px 35% 39 43px'}, + {at: 0.6, expect: '52px 50% 48 46px'}, + {at: 1, expect: '80px 70% 60 50px'}, + {at: 1.5, expect: '115px 95% 75 55px'}, + {at: 5, expect: '360px 270% 180 90px'}, + {at: 10, expect: '710px 520% 330 140px'} +]); +test_interpolation({ + property: 'border-image-width', + from: '10%', + to: '20px' +}, [ + // Percentages are relative to the size of the border image area, which is 120px. + {at: -0.3, expect: 'calc(13% + -6px)'}, // Should be parsed as 16px - 6px = 10px + {at: 0, expect: '10%'}, // Should be parsed as 12px + {at: 0.3, expect: 'calc(7% + 6px)'}, // Should be parsed as 8px + 6px = 14px + {at: 0.6, expect: 'calc(4% + 12px)'}, // Should be parsed as 5px + 12px = 17px + {at: 1, expect: 'calc(0% + 20px)'}, + {at: 1.5, expect: 'calc(-5% + 30px)'}, // Should be parsed as -6px + 30px = 24px +]); +test_interpolation({ + property: 'border-image-width', + from: '10px', + to: '20%' +}, [ + // Percentages are relative to the size of the border image area, which is 120px. + {at: -0.3, expect: 'calc(13px + -6%)'}, // Should be parsed as 13px - 7px = 6px + {at: 0, expect: 'calc(0% + 10px)'}, + {at: 0.3, expect: 'calc(7px + 6%)'}, // Should be parsed as 7px + 7px = 14px + {at: 0.6, expect: 'calc(4px + 12%)'}, // Should be parsed as 4px + 14px = 18px + {at: 1, expect: '20%'}, // Should be parsed as 24px + {at: 1.5, expect: 'calc(-5px + 30%)'}, // Should be parsed as -5px + 36px = 31px +]); + +test_interpolation({ + property: 'border-image-width', + from: '10px auto auto 20', + to: '110px auto auto 120' +}, [ + {at: -0.3, expect: ' 0px auto auto 0'}, + {at: 0, expect: ' 10px auto auto 20'}, + {at: 0.3, expect: ' 40px auto auto 50'}, + {at: 0.6, expect: ' 70px auto auto 80'}, + {at: 1, expect: '110px auto auto 120'}, + {at: 1.5, expect: '160px auto auto 170'}, +]); + +test_no_interpolation({ + property: 'border-image-width', + from: '10px auto auto 20', + to: '110px auto 120 auto' +}); +test_no_interpolation({ + property: 'border-image-width', + from: '10px', + to: '20' +}); +test_no_interpolation({ + property: 'border-image-width', + from: '10', + to: '20px' +}); +test_no_interpolation({ + property: 'border-image-width', + from: '10%', + to: '20' +}); +test_no_interpolation({ + property: 'border-image-width', + from: '10', + to: '20%' +}); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-left-width-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-left-width-composition.html new file mode 100644 index 0000000000..1b90effbc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-left-width-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-left-width composition</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties"> +<meta name="assert" content="border-left-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-left-width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'border-left-width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'border-left-width', + underlying: '10em', + addFrom: '100px', + addTo: '20em', +}, [ + {at: -0.3, expect: 'calc(130px + 4em)'}, + {at: 0, expect: 'calc(100px + 10em)'}, + {at: 0.5, expect: 'calc(50px + 20em)'}, + {at: 1, expect: '30em'}, + {at: 1.5, expect: 'calc(-50px + 40em)'}, +]); + +test_composition({ + property: 'border-left-width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-radius-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-radius-interpolation.html new file mode 100644 index 0000000000..195469e831 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-radius-interpolation.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-radius interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius"> +<meta name="assert" content="border-radius supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-radius: 30px; +} +.target { + width: 80px; + height: 80px; + display: inline-block; + background-color: black; + margin-right: 5px; + border-radius: 10px; +} +.expected { + background-color: green; + margin-right: 15px; +} +</style> + +<body></body> + +<script> +// As per https://bugzilla.mozilla.org/show_bug.cgi?id=137688, Firefox does not +// support getComputedStyle for shorthands. As such, we have one test for this +// which explicitly checks the shorthand variant, but most tests use one of the +// longhands instead. +function compareNotEmpty(actual, expected) { + assert_equals(actual, expected); + assert_not_equals(actual, ''); +} + +test_interpolation({ + property: 'border-radius', + from: '20px 40px 60px 80px / 120px 140px 160px 180px', + to: '30px 50px 70px 90px / 130px 150px 170px 190px', + comparisonFunction: compareNotEmpty, +}, [ + {at: -0.3, expect: '17px 37px 57px 77px / 117px 137px 157px 177px'}, + {at: 0, expect: '20px 40px 60px 80px / 120px 140px 160px 180px'}, + {at: 0.3, expect: '23px 43px 63px 83px / 123px 143px 163px 183px'}, + {at: 0.6, expect: '26px 46px 66px 86px / 126px 146px 166px 186px'}, + {at: 1, expect: '30px 50px 70px 90px / 130px 150px 170px 190px'}, + {at: 1.5, expect: '35px 55px 75px 95px / 135px 155px 175px 195px'} +]); + +test_interpolation({ + property: 'border-top-left-radius', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); +test_interpolation({ + property: 'border-top-left-radius', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); +test_interpolation({ + property: 'border-top-left-radius', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); +test_interpolation({ + property: 'border-top-left-radius', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); +test_interpolation({ + property: 'border-top-left-radius', + from: '10px', + to: '50px' +}, [ + {at: -0.3, expect: '0px'}, // CSS border-top-left-radius can't be negative. + {at: 0, expect: '10px'}, + {at: 0.3, expect: '22px'}, + {at: 0.6, expect: '34px'}, + {at: 1, expect: '50px'}, + {at: 1.5, expect: '70px'}, +]); +test_interpolation({ + property: 'border-top-left-radius', + from: '10px', + to: '100%' +}, [ + {at: -0.3, expect: 'calc(13px + -30%)'}, + {at: 0, expect: 'calc(10px + 0%)'}, + {at: 0.3, expect: 'calc(7px + 30%)'}, + {at: 0.6, expect: 'calc(4px + 60%)'}, + {at: 1, expect: '100%'}, + {at: 1.5, expect: 'calc(-5px + 150%)'}, +]); + +test_interpolation({ + property: 'border-top-left-radius', + from: '20px', + to: '10px 30px' +}, [ + {at: -2, expect: '40px 0px'}, + {at: -0.3, expect: '23px 17px'}, + {at: 0, expect: '20px'}, + {at: 0.3, expect: '17px 23px'}, + {at: 0.6, expect: '14px 26px'}, + {at: 1, expect: '10px 30px'}, + {at: 1.5, expect: '5px 35px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-right-width-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-right-width-composition.html new file mode 100644 index 0000000000..aa9e1dcc66 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-right-width-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-right-width composition</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties"> +<meta name="assert" content="border-right-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-right-width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'border-right-width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'border-right-width', + underlying: '10em', + addFrom: '100px', + addTo: '20em', +}, [ + {at: -0.3, expect: 'calc(130px + 4em)'}, + {at: 0, expect: 'calc(100px + 10em)'}, + {at: 0.5, expect: 'calc(50px + 20em)'}, + {at: 1, expect: '30em'}, + {at: 1.5, expect: 'calc(-50px + 40em)'}, +]); + +test_composition({ + property: 'border-right-width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-top-left-radius-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-top-left-radius-composition.html new file mode 100644 index 0000000000..1c2056bc01 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-top-left-radius-composition.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-top-left-radius composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius"> +<meta name="assert" content="border-top-left-radius supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-top-left-radius', + underlying: '40px 40px', + addFrom: '60px 60px', + addTo: '160px 160px', +}, [ + {at: -0.25, expect: '75px'}, + {at: 0, expect: '100px'}, + {at: 0.25, expect: '125px'}, + {at: 0.5, expect: '150px'}, + {at: 0.75, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px'}, +]); + +test_composition({ + property: 'border-top-left-radius', + underlying: '40px 140px', + replaceFrom: '100px 120px', + addTo: '160px 60px', +}, [ + {at: -0.25, expect: '75px 100px'}, + {at: 0, expect: '100px 120px'}, + {at: 0.25, expect: '125px 140px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 180px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px 220px'}, +]); + +test_composition({ + property: 'border-top-left-radius', + underlying: '40px 60px', + addFrom: '60px 140px', + replaceTo: '200px 120px', +}, [ + {at: -0.25, expect: '75px 220px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 180px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 140px'}, + {at: 1, expect: '200px 120px'}, + {at: 1.25, expect: '225px 100px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-top-right-radius-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-top-right-radius-composition.html new file mode 100644 index 0000000000..9a26d51375 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-top-right-radius-composition.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-top-right-radius composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius"> +<meta name="assert" content="border-top-right-radius supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-top-right-radius', + underlying: '40px 40px', + addFrom: '60px 60px', + addTo: '160px 160px', +}, [ + {at: -0.25, expect: '75px'}, + {at: 0, expect: '100px'}, + {at: 0.25, expect: '125px'}, + {at: 0.5, expect: '150px'}, + {at: 0.75, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px'}, +]); + +test_composition({ + property: 'border-top-right-radius', + underlying: '40px 140px', + replaceFrom: '100px 120px', + addTo: '160px 60px', +}, [ + {at: -0.25, expect: '75px 100px'}, + {at: 0, expect: '100px 120px'}, + {at: 0.25, expect: '125px 140px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 180px'}, + {at: 1, expect: '200px'}, + {at: 1.25, expect: '225px 220px'}, +]); + +test_composition({ + property: 'border-top-right-radius', + underlying: '40px 60px', + addFrom: '60px 140px', + replaceTo: '200px 120px', +}, [ + {at: -0.25, expect: '75px 220px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 180px'}, + {at: 0.5, expect: '150px 160px'}, + {at: 0.75, expect: '175px 140px'}, + {at: 1, expect: '200px 120px'}, + {at: 1.25, expect: '225px 100px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-top-width-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-top-width-composition.html new file mode 100644 index 0000000000..475c3930b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-top-width-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-top-width composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<meta name="assert" content="border-top-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'border-top-width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'border-top-width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'border-top-width', + underlying: '10em', + addFrom: '100px', + addTo: '20em', +}, [ + {at: -0.3, expect: 'calc(130px + 4em)'}, + {at: 0, expect: 'calc(100px + 10em)'}, + {at: 0.5, expect: 'calc(50px + 20em)'}, + {at: 1, expect: '30em'}, + {at: 1.5, expect: 'calc(-50px + 40em)'}, +]); + +test_composition({ + property: 'border-top-width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/border-width-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/border-width-interpolation.html new file mode 100644 index 0000000000..69f117b03e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/border-width-interpolation.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>border-width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<meta name="assert" content="border-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-width: 30px; +} +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + border: 2px solid orange; + margin: 18px; + border-width: 10px; +} +.expected { + background-color: green; +} +</style> + +<body></body> + +<script> +// As per https://bugzilla.mozilla.org/show_bug.cgi?id=137688, Firefox does not +// support getComputedStyle for shorthands. As such, we have one test for this +// which explicitly checks the shorthand variant, but most tests use one of the +// longhands instead. +function compareNotEmpty(actual, expected) { + assert_equals(actual, expected); + assert_not_equals(actual, ''); +} + +test_interpolation({ + property: 'border-width', + from: '20px 40px 60px 80px', + to: '30px 50px 70px 90px', + comparisonFunction: compareNotEmpty, +}, [ + {at: -0.3, expect: '17px 37px 57px 77px'}, + {at: 0, expect: '20px 40px 60px 80px'}, + {at: 0.3, expect: '23px 43px 63px 83px'}, + {at: 0.6, expect: '26px 46px 66px 86px'}, + {at: 1, expect: '30px 50px 70px 90px'}, + {at: 1.5, expect: '35px 55px 75px 95px'} +]); + +test_interpolation({ + property: 'border-left-width', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_interpolation({ + property: 'border-left-width', + from: 'initial', + to: '23px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '3px'}, + {at: 0.3, expect: '9px'}, + {at: 0.6, expect: '15px'}, + {at: 1, expect: '23px'}, + {at: 1.5, expect: '33px'}, +]); + +test_interpolation({ + property: 'border-left-width', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'border-left-width', + from: 'unset', + to: '23px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '3px'}, + {at: 0.3, expect: '9px'}, + {at: 0.6, expect: '15px'}, + {at: 1, expect: '23px'}, + {at: 1.5, expect: '33px'}, +]); + +test_interpolation({ + property: 'border-left-width', + from: '0px', + to: '10px' +}, [ + {at: -0.3, expect: '0px'}, // CSS border-left-width can't be negative. + {at: 0, expect: '0px'}, + {at: 0.3, expect: '3px'}, + {at: 0.6, expect: '6px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '15px'} +]); + +test_interpolation({ + property: 'border-bottom-width', + from: 'thick', + to: '15px' +}, [ + {at: -2, expect: '0px'}, // CSS border-bottom-width can't be negative. + {at: -0.3, expect: '2px'}, + {at: 0, expect: '5px'}, + {at: 0.3, expect: '8px'}, + {at: 0.6, expect: '11px'}, + {at: 1, expect: '15px'}, + {at: 1.5, expect: '20px'} +]); + +test_interpolation({ + property: 'border-left-width', + from: 'medium', + to: '13px' +}, [ + {at: -2, expect: '0px'}, // CSS border-left-width can't be negative. + {at: -0.25, expect: '0.5px'}, + {at: 0, expect: '3px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '9px'}, + {at: 1, expect: '13px'}, + {at: 1.5, expect: '18px'} +]); + +test_interpolation({ + property: 'border-right-width', + from: 'thin', + to: '11px' +}, [ + {at: -2, expect: '0px'}, // CSS border-right-width can't be negative. + {at: -0.3, expect: '0px'}, // CSS border-right-width can't be negative. + {at: 0, expect: '1px'}, + {at: 0.3, expect: '4px'}, + {at: 0.6, expect: '7px'}, + {at: 1, expect: '11px'}, + {at: 1.5, expect: '16px'} +]); + +test_interpolation({ + property: 'border-top-width', + from: '15px', + to: 'thick' +}, [ + {at: -2, expect: '35px'}, + {at: -0.3, expect: '18px'}, + {at: 0, expect: '15px'}, + {at: 0.3, expect: '12px'}, + {at: 0.6, expect: '9px'}, + {at: 1, expect: '5px'}, + {at: 1.5, expect: '0px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-composition.html b/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-composition.html new file mode 100644 index 0000000000..7cc1ba2992 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-composition.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>box-shadow composition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow"> +<meta name="test" content="box-shadow supports animation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> +<style> +.target { + width: 40px; + height: 40px; + background-color: black; +} +.expected { + background-color: green; +} +</style> +<body> +<script> +test_composition({ + property: 'box-shadow', + replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', + addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', +}, [ + {at: -0.3, expect: 'rgb(70, 70, 70 ) 7px 14px 21px 28px'}, + {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px'}, + {at: 0.5, expect: 'rgb(150, 150, 150) 15px 30px 45px 60px'}, + {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px'}, + {at: 1.5, expect: 'rgb(250, 250, 250) 25px 50px 75px 100px'}, +]); + +test_composition({ + property: 'box-shadow', + underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px', + addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', + addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', +}, [ + {at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px'}, + {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px'}, + {at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px'}, + {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px'}, + {at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px'}, +]); +test_composition({ + property: 'box-shadow', + underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px', + addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px inset', + addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px inset', +}, [ + {at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px inset'}, + {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px inset'}, + {at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px inset'}, + {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px inset'}, + {at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px inset'}, +]); +test_composition({ + property: 'box-shadow', + underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px', + addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', + addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', +}, [ + {at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(70, 70, 70) 7px 14px 21px 28px'}, + {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'}, + {at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(150, 150, 150) 15px 30px 45px 60px'}, + {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'}, + {at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(250, 250, 250) 25px 50px 75px 100px'}, +]); +test_composition({ + property: 'box-shadow', + underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px', + addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset', + addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset', +}, [ + {at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px, rgb(70, 70, 70) 7px 14px 21px 28px inset'}, + {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset'}, + {at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px, rgb(150, 150, 150) 15px 30px 45px 60px inset'}, + {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset'}, + {at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px, rgb(250, 250, 250) 25px 50px 75px 100px inset'}, +]); +test_composition({ + property: 'box-shadow', + underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px', + addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', + replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(130, 130, 130) 13px 26px 39px 52px'}, + {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'}, + {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px'}, + {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, + {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -5px -10px 0px -20px'}, +]); +test_composition({ + property: 'box-shadow', + underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px', + replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', + addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', +}, [ + {at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px 50.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px, rgba(0, 0, 0, 0) -6px -12px 0px -24px'}, + {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, + {at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px 22px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'}, + {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'}, + {at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px -14px, rgb(30, 60, 90) 3px 6px 9px 12px, rgb(255, 255, 255) 30px 60px 90px 120px'}, +]); +test_composition({ + property: 'box-shadow', + underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px', + addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px', + replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px, rgb(130, 130, 130) 13px 26px 39px 52px, rgb(255, 255, 255) 26px 52px 78px 104px'}, + {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px'}, + {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'}, + {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, + {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -2px -4px 0px -8px, rgba(0, 0, 0, 0) -5px -10px 0px -20px, rgba(0, 0, 0, 0) -10px -20px 0px -40px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-interpolation.html new file mode 100644 index 0000000000..f0b7ec083e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-interpolation.html @@ -0,0 +1,238 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow"> +<meta name="test" content="box-shadow supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + box-shadow: 30px 10px 30px 10px black; +} +.target { + display: inline-block; + width: 60px; + height: 60px; + font-size: 3px; + border: 2px solid; + margin-right: 20px; + margin-bottom: 30px; + color: green; + box-shadow: 10px 30px 10px 30px black; +} +.expected { + margin-right: 40px; +} +</style> +<body> +<script> +test_interpolation({ + property: 'box-shadow', + from: neutralKeyframe, + to: '20px 20px 20px 20px black', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 7px 33px 7px 33px'}, + {at: 0, expect: 'rgb(0, 0, 0) 10px 30px 10px 30px'}, + {at: 0.3, expect: 'rgb(0, 0, 0) 13px 27px 13px 27px'}, + {at: 0.6, expect: 'rgb(0, 0, 0) 16px 24px 16px 24px'}, + {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, + {at: 1.5, expect: 'rgb(0, 0, 0) 25px 15px 25px 15px'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: 'initial', + to: '20px 20px 20px 20px black', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'}, + {at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, + {at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'}, + {at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'}, + {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, + {at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: 'inherit', + to: '20px 20px 20px 20px black', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 33px 7px 33px 7px'}, + {at: 0, expect: 'rgb(0, 0, 0) 30px 10px 30px 10px'}, + {at: 0.3, expect: 'rgb(0, 0, 0) 27px 13px 27px 13px'}, + {at: 0.6, expect: 'rgb(0, 0, 0) 24px 16px 24px 16px'}, + {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, + {at: 1.5, expect: 'rgb(0, 0, 0) 15px 25px 15px 25px'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: 'unset', + to: '20px 20px 20px 20px black', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'}, + {at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, + {at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'}, + {at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'}, + {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, + {at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'}, +]); + +// Test basic functionality, and clipping blur at 0 +test_interpolation({ + property: 'box-shadow', + from: '15px 10px 5px 6px black', + to: '-15px -10px 25px -4px orange', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'}, + {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'}, + {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'}, + {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'}, + {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'}, + {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: '0px 0px 0px 0px black', + to: '1px 1px 1px 1px black', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) -0.3px -0.3px 0px -0.3px'}, + {at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px 0px'}, + {at: 0.3, expect: 'rgb(0, 0, 0) 0.3px 0.3px 0.3px 0.3px'}, + {at: 0.6, expect: 'rgb(0, 0, 0) 0.6px 0.6px 0.6px 0.6px'}, + {at: 1, expect: 'rgb(0, 0, 0) 1px 1px 1px 1px'}, + {at: 1.5, expect: 'rgb(0, 0, 0) 1.5px 1.5px 1.5px 1.5px'}, +]); + +// Test with color as first value. +test_interpolation({ + property: 'box-shadow', + from: 'black 15px 10px 5px 6px', + to: 'orange -15px -10px 25px -4px', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'}, + {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'}, + {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'}, + {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'}, + {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'}, + {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: '15px 10px 5px 6px black inset', + to: '-15px -10px 25px -4px orange inset', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px inset'}, + {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px inset'}, + {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px inset'}, + {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px inset'}, + {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px inset'}, + {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px inset'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: '15px 10px 5px 6px black', + to: '-15px -10px 25px -4px', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'}, + {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'}, + {at: 0.3, expect: 'rgb(0, 38, 0) 6px 4px 11px 3px'}, + {at: 0.6, expect: 'rgb(0, 77, 0) -3px -2px 17px 0px'}, + {at: 1, expect: 'rgb(0, 128, 0) -15px -10px 25px -4px'}, + {at: 1.5, expect: 'rgb(0, 192, 0) -30px -20px 35px -9px'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: '10px 10px 10px 10px black', + to: '10px 10px 10px 10px currentColor', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'}, + {at: 0, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'}, + {at: 0.3, expect: 'rgb(0, 38, 0) 10px 10px 10px 10px'}, + {at: 0.6, expect: 'rgb(0, 77, 0) 10px 10px 10px 10px'}, + {at: 1, expect: 'rgb(0, 128, 0) 10px 10px 10px 10px'}, + {at: 1.5, expect: 'rgb(0, 192, 0) 10px 10px 10px 10px'}, +]); + +// Test padding shorter lists +test_interpolation({ + property: 'box-shadow', + from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000', + to: 'none', +}, [ + {at: -0.3, expect: 'rgba(255, 255, 0, 0.65) 13px 26px 0px 0px, rgb(0, 166, 0) 6.5px 39px 0px 0px inset'}, + {at: 0, expect: 'rgba(255, 255, 0, 0.5) 10px 20px 0px 0px, rgb(0, 128, 0) 5px 30px 0px 0px inset'}, + {at: 0.3, expect: 'rgba(255, 255, 0, 0.353) 7px 14px 0px 0px, rgba(0, 128, 0, 0.7) 3.5px 21px 0px 0px inset'}, + {at: 0.6, expect: 'rgba(255, 255, 0, 0.2) 4px 8px 0px 0px, rgba(0, 128, 0, 0.4) 2px 12px 0px 0px inset'}, + {at: 1, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset'}, + {at: 1.5, expect: 'rgba(0, 0, 0, 0) -5px -10px 0px 0px, rgba(0, 0, 0, 0) -2.5px -15px 0px 0px inset'}, +]); + +// Test calc with comparison functions +test_interpolation({ + property: 'box-shadow', + from: 'inset 0 0 0 0 black', + to: 'inset 0 0 0 calc(max(10em, 20px) / 2) black', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0) 0px 0px 0px -4.5px inset'}, + {at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px 0px inset'}, + {at: 0.3, expect: 'rgb(0, 0, 0) 0px 0px 0px 4.5px inset'}, + {at: 0.6, expect: 'rgb(0, 0, 0) 0px 0px 0px 9px inset'}, + {at: 1, expect: 'rgb(0, 0, 0) 0px 0px 0px 15px inset'}, + {at: 1.5, expect: 'rgb(0, 0, 0) 0px 0px 0px 22.5px inset'}, +]); + +// Test unmatched inset +test_no_interpolation({ + property: 'box-shadow', + from: '10px 20px yellow, 5px 10px green', + to: 'inset 5px 10px green, 15px 20px blue' +}); + +// Test CSS color 4 color types +test_interpolation({ + property: 'box-shadow', + from: '10px 10px 10px 10px rgb(0 0 0)', + to: '10px 10px 10px 10px color(srgb 1 1 1)', +}, [ +{at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, + {at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'}, + {at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'}, + {at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'}, + {at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'}, + {at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: '10px 10px 10px 10px color(srgb 0, 0, 0)', + to: '10px 10px 10px 10px rgb(255 255 255)', +}, [ +{at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, + {at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'}, + {at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'}, + {at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'}, + {at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'}, + {at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'}, +]); + +test_interpolation({ + property: 'box-shadow', + from: '10px 10px 10px 10px color(srgb 0, 0, 0)', + to: '10px 10px 10px 10px color(srgb 1 1 1)', +}, [ +{at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, + {at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'}, + {at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'}, + {at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'}, + {at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'}, + {at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/discrete-no-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/discrete-no-interpolation.html new file mode 100644 index 0000000000..d3d3421d5e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/discrete-no-interpolation.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'background-attachment', + from: 'initial', + to: 'fixed' +}); + +test_no_interpolation({ + property: 'background-blend-mode', + from: 'initial', + to: 'overlay' +}); + +test_no_interpolation({ + property: 'background-clip', + from: 'initial', + to: 'content-box' +}); + +test_no_interpolation({ + property: 'background-origin', + from: 'initial', + to: 'border-box' +}); + +test_no_interpolation({ + property: 'background-repeat', + from: 'initial', + to: 'round' +}); + +test_no_interpolation({ + property: 'border-image-repeat', + from: 'initial', + to: 'round' +}); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-animation-with-zero-alpha-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-animation-with-zero-alpha-ref.html new file mode 100644 index 0000000000..8442d3de96 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-animation-with-zero-alpha-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.box { + width: 100px; + height: 100px; + background-color: rgba(100, 100, 0, 0); +} +</style> +<body> + <div class='box'></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-animation-with-zero-alpha.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-animation-with-zero-alpha.html new file mode 100644 index 0000000000..c282898287 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-animation-with-zero-alpha.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-animation-with-zero-alpha-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes bgcolor { + 0% { background-color: rgb(0, 200, 0, 0); } + 100% { background-color: rgb(200, 0, 0, 0); } +} +</style> +<body> +<div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-obscured-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-obscured-ref.html new file mode 100644 index 0000000000..d615522c84 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-obscured-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +.parent { + width: 100px; + height: 100px; + background-color: rgb(100, 100, 0); +} +.container { + width: 100px; + height: 100px; + background-color: rgb(100, 0, 100); +} +</style> +<body> + <div class='parent'> + <div class='container'></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-obscured.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-obscured.html new file mode 100644 index 0000000000..9f8c2fc9c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-obscured.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-transition-obscured-ref.html"> +<style> +.parent { + width: 100px; + height: 100px; + background-color: rgb(0, 200, 0); + transition: background-color 200000ms steps(2) -99999.9ms; +} +.container { + width: 100px; + height: 100px; + background-color: rgb(0, 0, 200); + transition: background-color 200000ms steps(2) -99999.9ms; +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="parent" id="pa"> + <div class="container" id="target"></div> +</div> + +<script> +function startTransition() { + requestAnimationFrame(() => { + document.getElementById('target').style.backgroundColor = "rgb(200, 0, 0)"; + document.getElementById('pa').style.backgroundColor = "rgb(200, 0, 0)"; + const animations = document.getAnimations(); + Promise.all([animations[0].ready, animations[1].ready]).then(() => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + takeScreenshot(); + }); + }); + }); + }); +} + +requestAnimationFrame(startTransition); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-delay-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-delay-ref.html new file mode 100644 index 0000000000..8e0e70ba20 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-delay-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(100, 100, 0)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-delay.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-delay.html new file mode 100644 index 0000000000..bf7d8fb63a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-delay.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-transition-with-delay-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: rgb(0, 200, 0); + transition: background-color 200000ms steps(2) -99999.9ms; +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container" id="target"></div> + +<script> +// This test differs from "background-color-transition.html" because it runs the +// transition starting from the set background color, rather than using a +// delay to start in the middle of the transition. This tests a new codepath +// where the first frame of the transition has the original background color, +// which is why we need the transition fully running. Since we are using the +// step(2) in the animation, so it is enough to wait for two frames and the +// animation should be in its mid-point, that's the time we should take +// screenshot. +function startTransition() { + requestAnimationFrame(() => { + document.getElementById('target').style.backgroundColor = "rgb(200, 0, 0)"; + document.getAnimations()[0].ready.then(() => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + takeScreenshot(); + }); + }); + }); + }); +} + +requestAnimationFrame(startTransition); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-initially-transparent-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-initially-transparent-ref.html new file mode 100644 index 0000000000..10475b7bb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-initially-transparent-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.box { + width: 100px; + height: 100px; + background-color: rgba(200, 0, 0, 0.4); +} +</style> +<body> + <div class='box'></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-initially-transparent.html b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-initially-transparent.html new file mode 100644 index 0000000000..bd75226601 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/invalidation/background-color-transition-with-initially-transparent.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="background-color-transition-with-initially-transparent-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + transition: background-color 200000ms steps(2) -99999.9ms; +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container" id="target"></div> + +<script> +function startTransition() { + requestAnimationFrame(() => { + document.getElementById('target').style.backgroundColor = "rgb(200, 0, 0, 0.8)"; + document.getAnimations()[0].ready.then(() => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + takeScreenshot(); + }); + }); + }); + }); +} + +requestAnimationFrame(startTransition); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length1-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length1-ref.html new file mode 100644 index 0000000000..44e416fe8f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(0, 0, 199)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length1.html b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length1.html new file mode 100644 index 0000000000..d49ac0828c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="two-background-color-animation-diff-length1-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + animation: bgcolor2 10s steps(2, end), bgcolor1 0.001s steps(2, end); +} +@keyframes bgcolor1 { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +@keyframes bgcolor2 { + 0% { background-color: rgb(0, 0, 199); } + 100% { background-color: rgb(0, 0, 200); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../web-animations/testcommon.js"></script> +<body> +<div class="container"></div> + +<script> +// This test ensures that if we have two different-length animation, when the +// one with higher compositing order finishes, the other one would still run +// normally. +const animations = document.getAnimations(); +Promise.all([animations[0].ready, animations[1].ready]).then(() => { + waitForAnimationFrames(3).then(() => { + takeScreenshot(); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length2-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length2-ref.html new file mode 100644 index 0000000000..44e416fe8f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length2-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(0, 0, 199)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length2.html b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length2.html new file mode 100644 index 0000000000..979414db26 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="two-background-color-animation-diff-length2-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + animation: bgcolor2 10s steps(2, end), bgcolor1 2s 1s steps(2, end); +} +@keyframes bgcolor1 { + 0% { background-color: rgb(0, 200, 0); } + 100% { background-color: rgb(200, 0, 0); } +} +@keyframes bgcolor2 { + 0% { background-color: rgb(0, 0, 199); } + 100% { background-color: rgb(0, 0, 200); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../web-animations/testcommon.js"></script> +<body> +<div class="container"></div> + +<script> +// This test ensures that when there are two animations where one of them has +// animation delays, we show the right color when the delayed animation is not +// started yet. +const animations = document.getAnimations(); +Promise.all([animations[0].ready, animations[1].ready]).then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length3-ref.html b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length3-ref.html new file mode 100644 index 0000000000..66af34da3d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length3-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgb(0, 199, 0)'; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length3.html b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length3.html new file mode 100644 index 0000000000..b727f5c64f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/two-background-color-animation-diff-length3.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="two-background-color-animation-diff-length3-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + animation: bgcolor2 200s steps(2, end), bgcolor1 100s 0.001s steps(2, end); +} +@keyframes bgcolor1 { + 0% { background-color: rgb(0, 199, 0); } + 100% { background-color: rgb(0, 200, 0); } +} +@keyframes bgcolor2 { + 0% { background-color: rgb(0, 0, 199); } + 100% { background-color: rgb(0, 0, 200); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../web-animations/testcommon.js"></script> +<body> +<div class="container"></div> + +<script> +// This test ensures that when there are two animations where one of them has +// animation delays, we show the right color when the delayed animation is +// started. +const animations = document.getAnimations(); +Promise.all([animations[0].ready, animations[1].ready]).then(() => { + waitForAnimationFrames(3).then(() => { + takeScreenshot(); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-331.html b/testing/web-platform/tests/css/css-backgrounds/background-331.html new file mode 100644 index 0000000000..121623453a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-331.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background shorthand - initial values</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" /> + <meta name="flags" content="dom" /> + <meta name="assert" content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value" /> + <style> + #test { + background: ; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + var cs = getComputedStyle(document.getElementById("test"), null); + + test(function() { + assert_equals(cs.getPropertyValue("background-image"), + "none", "background initial value for background-image"); + }, "background_initial_image"); + + test(function() { + assert_equals(cs.getPropertyValue("background-position"), + "0% 0%", "background initial value for background-position"); + }, "background_initial_position"); + + test(function() { + assert_equals(cs.getPropertyValue("background-size"), + "auto", "background initial value for background-size"); + }, "background_initial_size"); + + test(function() { + assert_equals(cs.getPropertyValue("background-repeat"), + "repeat", "background initial value for background-repeat"); + }, "background_initial_repeat"); + + test(function() { + assert_equals(cs.getPropertyValue("background-attachment"), + "scroll", "background initial value for background-attachment"); + }, "background_initial_attachment"); + + test(function() { + assert_equals(cs.getPropertyValue("background-origin"), + "padding-box", "background initial value for background-origin"); + }, "background_initial_origin"); + + test(function() { + assert_equals(cs.getPropertyValue("background-clip"), + "border-box", "background initial value for background-clip"); + }, "background_initial_clip"); + + test(function() { + assert_equals(cs.getPropertyValue("background-color"), + "rgba(0, 0, 0, 0)", "background initial value for background-color"); + }, "background_initial_color"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-332.html b/testing/web-platform/tests/css/css-backgrounds/background-332.html new file mode 100644 index 0000000000..54c5e68c51 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-332.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background shorthand - all values specified</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" /> + <meta name="flags" content="dom image" /> + <meta name="assert" content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration" /> + <style> + #test { + background: url("support/60x60-green.png") 40% / 10em gray round fixed border-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + var cs = getComputedStyle(document.getElementById("test"), null); + + test(function() { + assert_equals(cs.getPropertyValue("background-image"), + 'url("' + new URL("support/60x60-green.png", window.location.href).href + '")'); + }, "Computed value for background-image after setting background shorthand"); + + test(function() { + assert_equals(cs.getPropertyValue("background-position"), + "40% 50%", "background specified value for background-position"); + }, "background_specified_position"); + + test(function() { + assert_equals(cs.getPropertyValue("background-size"), + "160px", "background specified value for background-size"); + }, "background_specified_size"); + + test(function() { + assert_equals(cs.getPropertyValue("background-repeat"), + "round", "background specified value for background-repeat"); + }, "background_specified_repeat"); + + test(function() { + assert_equals(cs.getPropertyValue("background-attachment"), + "fixed", "background specified value for background-attachment"); + }, "background_specified_attachment"); + + test(function() { + assert_equals(cs.getPropertyValue("background-origin"), + "border-box", "background specified value for background-origin"); + }, "background_specified_origin"); + + test(function() { + assert_equals(cs.getPropertyValue("background-clip"), + "border-box", "background specified value for background-clip"); + }, "background_specified_clip"); + + test(function() { + assert_equals(cs.getPropertyValue("background-color"), + "rgb(128, 128, 128)", "background specified value for background-color"); + }, "background_specified_color"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-333.html b/testing/web-platform/tests/css/css-backgrounds/background-333.html new file mode 100644 index 0000000000..53dd15053c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-333.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background shorthand - background-color 'red'</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" /> + <meta name="flags" content="dom" /> + <meta name="assert" content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration, and finally 'background-color' is set to the specified color, if any, else set to its initial value" /> + <style> + #test { + background: red; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + var cs = getComputedStyle(document.getElementById("test"), null); + + test(function() { + assert_equals(cs.getPropertyValue("background-image"), + "none", "background initial value for background-image"); + }, "background_specified_color_image"); + + test(function() { + assert_equals(cs.getPropertyValue("background-position"), + "0% 0%", "background initial value for background-position"); + }, "background_specified_color_position"); + + test(function() { + assert_equals(cs.getPropertyValue("background-size"), + "auto", "background initial value for background-size"); + }, "background_specified_color_size"); + + test(function() { + assert_equals(cs.getPropertyValue("background-repeat"), + "repeat", "background initial value for background-repeat"); + }, "background_specified_color_repeat"); + + test(function() { + assert_equals(cs.getPropertyValue("background-attachment"), + "scroll", "background initial value for background-attachment"); + }, "background_specified_color_attachment"); + + test(function() { + assert_equals(cs.getPropertyValue("background-origin"), + "padding-box", "background initial value for background-origin"); + }, "background_specified_color_origin"); + + test(function() { + assert_equals(cs.getPropertyValue("background-clip"), + "border-box", "background initial value for background-clip"); + }, "background_specified_color_clip"); + + test(function() { + assert_equals(cs.getPropertyValue("background-color"), + "rgb(255, 0, 0)", "background specified value for background-color"); + }, "background_specified_color_color"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-334.html b/testing/web-platform/tests/css/css-backgrounds/background-334.html new file mode 100644 index 0000000000..03ee2d3bb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-334.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background shorthand - background-size '100% auto'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" title="3.10. Backgrounds Shorthand: the 'background' property"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <!-- + http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html + --> + <link rel="match" href="reference/background-334-ref.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Background-size with '100% auto' implies to rescale the image horizontally so that it fills the background area width and to rescale the image vertically so that it fills the background area height."> + <style> + #ref { + background-color: red; + height: 160px; + width: 160px; + } + #test { + background: #CCC url(support/60x60-green.png) top left / 100% auto no-repeat; + border: black dotted 5px; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </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 id="ref"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-335.html b/testing/web-platform/tests/css/css-backgrounds/background-335.html new file mode 100644 index 0000000000..206485c1d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-335.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background shorthand - only one <box> value</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" /> + <meta name="flags" content="dom" /> + <meta name="assert" content="Check if one <box> value is present then it sets both 'background-origin' and 'background-clip' to that value" /> + <style> + #test { + background: content-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + var cs = getComputedStyle(document.getElementById("test"), null); + + test(function() { + assert_equals(cs.getPropertyValue("background-origin"), + "content-box", "background specified value for background-origin"); + }, "background_specified_box_one_origin"); + + test(function() { + assert_equals(cs.getPropertyValue("background-clip"), + "content-box", "background specified value for background-clip"); + }, "background_specified_box_one_clip"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-336.html b/testing/web-platform/tests/css/css-backgrounds/background-336.html new file mode 100644 index 0000000000..b921732ca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-336.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background shorthand - two <box> values</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" /> + <meta name="flags" content="dom" /> + <meta name="assert" content="Check if two <box> values are present, then the first sets 'background-origin' and the second 'background-clip'" /> + <style> + #test { + background: border-box padding-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + var cs = getComputedStyle(document.getElementById("test"), null); + + test(function() { + assert_equals(cs.getPropertyValue("background-origin"), + "border-box", "background specified value for background-origin"); + }, "background_specified_box_two_origin"); + + test(function() { + assert_equals(cs.getPropertyValue("background-clip"), + "padding-box", "background specified value for background-clip"); + }, "background_specified_box_two_clip"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-350.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-350.html new file mode 100644 index 0000000000..979171f6e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-350.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: 'background-attachment: local' and 'overflow: hidden'</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment"> + <link rel="match" href="reference/ref-if-there-is-no-red.xht"> + + <!-- + + More info: + + Re: [css3-background] background-attachment: local + http://lists.w3.org/Archives/Public/www-style/2013May/0542.html + + --> + + <meta content="This test checks that when an element has 'background-attachment: local', then the background image is fixed with regard to what is the element's scrollable area and not to its viewport. In this test, what would be the scrollable area for the div element is where the red square is and such area is clipped due to 'overflow: hidden'." name="assert"> + + <style> + div + { + background-attachment: local; + background-image: url("support/100x100-red.png"); + background-position: bottom right; + background-repeat: no-repeat; + font-size: 100px; + line-height: 1; + height: 100px; + overflow: hidden; + width: 100px; + } + </style> + + <body> + + <p>Test passes if there is <strong>no red</strong>. + + <div id="target"> <br> </div> + + <!-- + +(0px, 0px) (200px, 0px) + +.......................+ + |+..........+ | + || +......+ | | + || | red | | | <== bottom right of scrolling box + || |square| | | when background-image dimensions + || | | | | are the same as the element's + || +......+ | | viewport dimensions + +..........+ | + | | + | +......+| + | | red || <== bottom right of scrollable area + | |square|| which is outside of the viewport + | | || area and which is clipped due + | +......+| to 'overflow: hidden' + +.......................+ +(0px, 200px) (200px, 200px) + + --> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-353.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-353.html new file mode 100644 index 0000000000..ca5a41d05a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-353.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: 'background-attachment: local' and 'overflow: hidden'</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <script src="/common/reftest-wait.js"></script> + <link rel="preload" as="image" href="support/100x100-gr-rr.png" onload="takeScreenshot()" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <!-- + + More info: + + Re: [css3-background] background-attachment: local + http://lists.w3.org/Archives/Public/www-style/2013May/0542.html + + --> + + <meta content="This test checks that when an element has 'background-attachment: local', then the background image is fixed with regard to what is the element's scrollable area and not to its viewport. In this test, what would be the scrollable area for the div#target element is where the red area of its background image 100x100-gr-rr.png is and such area is clipped due to 'overflow: hidden'." name="assert"> + + <style> + div#control + { + background-color: red; + border: solid green; + border-width: 50px 0 0 50px; + height: 50px; + margin-bottom: -100px; + width: 50px; + } + + div#target + { + background-attachment: local; + background-image: url("support/100x100-gr-rr.png"); + background-repeat: no-repeat; + background-position: center; + font-family: Ahem; + font-size: 100px; + line-height: 1; + height: 100px; + overflow: hidden; + width: 100px; + } + </style> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="control"></div> + + <div id="target"> <br> </div> + + <!-- + + div#control is + + (0px, 0px) (100px, 0px) + +.......................+ + | | + | | + | green area | + | | + | | + | green area | + | | + | +........+| + | green | red || + | area | area || + | | || + | +........+| + +.......................+ +(0px, 100px) (100px, 100px) + + + = = = = = = = + + + div#target with background-position: top left + + (0px, 0px) (100px, 0px) + +.......................+ + | +........+ | + | | green | red | + | | area | area | + | | | | + | +........+ | + | | + | red area | + | | + | | + | red area | + | | + | | + +.......................+ +(0px, 100px) (100px, 100px) + + + = = = = = = = + + + div#target with background-position: center + + (0px, 0px) (100px, 0px) + +.......................+ + | | + | green area | + | | overflowed + | | area + | green area | | + | | V + | +...........| ...........+ + | | +........+| | + | green | | green || red | + | area | | area || area | + | | | || | + | | +........+| | + +.......................+ | + | | + | red area | <== overflowed + | | <== area + | red area | + | | + | | + +.........................+ + + --> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-block-002.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-block-002.html new file mode 100644 index 0000000000..7936b027c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-block-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> + + <html class="reftest-wait"> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: 'background-attachment: fixed' applied on a block element</title> + + <!-- + + Created: November 25th 2023 + + Last modified: December 17th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> + <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-window-scroll"> + <link rel="match" href="reference/background-attachment-fixed-block-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta name="assert" content="This test checks the interaction between a block element with a 'background-attachment: fixed' background-image and the expected behavior of the scroll() method which applies to the viewport window."> + + <style> + body + { + color: transparent; + font-family: Ahem; + font-size: 50vh; + height: 50vh; + line-height: 2; + margin: 0px; + } + + div#test-passed + { + background-attachment: fixed; + background-image: linear-gradient(to bottom, blue 25%, orange 25% 50%, lime 50% 75%, purple 75% 100%); + } + </style> + + <script> + + document.documentElement.addEventListener("TestRendered", () => { + window.scroll(0, document.body.offsetHeight); + document.documentElement.classList.remove('reftest-wait'); + }); + + </script> + + <div>F</div> + + <!-- + Having more than 1 character may trigger + unneedlessly an horizontal scrollbar + --> + + <div id="test-passed">P</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-border-radius-offset-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-border-radius-offset-ref.html new file mode 100644 index 0000000000..b912624b50 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-border-radius-offset-ref.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>background-attachment: fixed with border-radius and offset (reference)</title> +<style> + .stripe-not-fixed { + position: absolute; + top: calc(8px - 128px); + width: 200px; + height: 683px; + background-image: url("/images/grgr-256x256.png"); + background-position: 0px -80px; + background-size: 1024px 768px; + background-repeat: no-repeat; + clip-path: inset(0 0 385px 0); + } + body { + overflow: hidden; + height: 300vh; + } +</style> +<div class="stripe-not-fixed"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-border-radius-offset.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-border-radius-offset.html new file mode 100644 index 0000000000..5d92bcb56a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-border-radius-offset.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>background-attachment: fixed with border-radius and offset</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-attachment"> +<link rel="help" href="https://crbug.com/1439780"> +<link rel="match" href="background-attachment-fixed-border-radius-offset-ref.html"> +<style> + .stripe { + position: absolute; + top: calc(8px - 128px); + width: 200px; + height: 683px; + background-image: url("/images/grgr-256x256.png"); + background-position: 0px -200px; + background-size: 1024px 768px; + background-repeat: no-repeat; + background-attachment: fixed; + border-radius: 1px 0 0 0; + clip-path: inset(0 0 385px 0); + } + body { + overflow: hidden; + height: 300vh; + } +</style> +<div class="stripe"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-002.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-002.html new file mode 100644 index 0000000000..9447b9d9b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-002.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> + + <html class="reftest-wait"> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: 'background-attachment: fixed' applied on an inline element</title> + + <!-- + + Created: November 25th 2023 + + Last modified: December 17th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> + <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-window-scroll"> + <link rel="match" href="reference/background-attachment-fixed-inline-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta name="assert" content="This test checks the interaction between an inline with a 'background-attachment: fixed' background-image and the expected behavior of the scroll() method which applies to the viewport window."> + + <style> + body + { + color: transparent; + font-family: Ahem; + font-size: 50vh; + height: 50vh; + line-height: 2; + margin: 0px; + } + + span#test-passed + { + background-attachment: fixed; + background-image: linear-gradient(to bottom, blue 25%, orange 25% 50%, lime 50% 75%, purple 75% 100%); + vertical-align: top; + } + </style> + + <script> + + document.documentElement.addEventListener("TestRendered", () => { + window.scroll(0, document.body.offsetHeight); + document.documentElement.classList.remove('reftest-wait'); + }); + + </script> + + <div>F</div> + + <div><span id="test-passed">P</span></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-scrolled-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-scrolled-ref.html new file mode 100644 index 0000000000..1767c84a5f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-scrolled-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +body { + /* suppress scrollbars */ + overflow: hidden; +} +#target { + background-attachment: fixed; + background-image: linear-gradient(green 50%, yellow 50%); + font-size: 130px; + line-height: 100px; +} +</style> +<span id="target"> + <br> + <br> + <br> + <br> + <br> + <br> + <br> + <br> +</span> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-scrolled.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-scrolled.html new file mode 100644 index 0000000000..746997d605 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inline-scrolled.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> +<link rel="match" href="background-attachment-fixed-inline-scrolled-ref.html"> +<meta name="assert" content="Background with background-attachment-fixed on an inline element should be fixed to the viewport"> +<style> +body { + /* suppress scrollbars */ + overflow: hidden; +} +#target { + background-attachment: fixed; + background-image: linear-gradient(green 50%, yellow 50%); + font-size: 130px; + line-height: 100px; +} +</style> +<span id="target"> + <br> + <br> + <br> + <br> + <br> + <br> + <br> + <br> +</span> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + scrollTo(0, 300); + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inside-transform-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inside-transform-1-ref.html new file mode 100644 index 0000000000..8d4c3f785c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inside-transform-1-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-attachment: background-attachment:fixed inside a transform</title> + <link rel="author" title="Botond Ballo" href="mailto:botond@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + body { + height: 4000px; + margin: 0; + } + + #outer { + margin: 200px; + height: 700px; + width: 300px; + transform: rotate(45deg); + overflow: hidden; + } + + #inner { + height: 700px; + background-image: radial-gradient(farthest-corner at center, blue, black); + background-size: 300px 300px; + background-position: 200px 200px; + background-color: lime; + background-repeat: no-repeat; + background-attachment: scroll; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inside-transform-1.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inside-transform-1.html new file mode 100644 index 0000000000..9dae31aacc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed-inside-transform-1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-attachment: background-attachment:fixed inside a transform</title> + <link rel="author" title="Botond Ballo" href="mailto:botond@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <link rel="match" href="background-attachment-fixed-inside-transform-1-ref.html"> + <meta name="assert" content="Test checks whether background-attachment: 'fixed' inside a transform behaves like background-attachment: 'scroll'."> + <style> + body { + height: 4000px; + margin: 0; + } + + #outer { + margin: 200px; + height: 700px; + width: 300px; + transform: rotate(45deg); + overflow: hidden; + } + + #inner { + height: 700px; + background-image: radial-gradient(farthest-corner at center, blue, black); + background-size: 300px 300px; + background-position: 200px 200px; + background-color: lime; + background-repeat: no-repeat; + background-attachment: fixed; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed.html new file mode 100644 index 0000000000..4c6db13401 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-fixed.html @@ -0,0 +1,33 @@ +<!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 Test: 'Background-attachment' with value 'fixed' + </title> + <link rel="author" title="Melanie Archer" href="mailto:job@twobanjos.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="If 'background-attachment' is given the value 'fixed,' then the background image remains fixed in relation to the user agent viewport when the viewport is scrolled." /> +<style type="text/css"> + #test-container { + background-attachment: fixed; + background-position: 1em 5em; + background-image: url("support/cat.png"); + background-repeat: no-repeat; + border: 1px solid blue; + height: 250px; + overflow: scroll; + width: 250px; + } + + </style> + </head> + <body> + <p> + Test passes if the cat image does not move when the blue-bordered containing block or the viewport is scrolled. + </p> + <div id="test-container"> + Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-block-002.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-block-002.html new file mode 100644 index 0000000000..edaabd175e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-block-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> + + <html class="reftest-wait"> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: 'background-attachment: local' applied on a block element</title> + + <!-- + + Created: November 25th 2023 + + Last modified: December 17th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> + <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-window-scroll"> + <link rel="match" href="reference/background-attachment-local-block-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta name="assert" content="This test checks the interaction between a block element with a 'background-attachment: local' background-image and the expected behavior of the scroll() method which applies to the viewport window."> + + <style> + body + { + color: transparent; + font-family: Ahem; + font-size: 50vh; + height: 50vh; + line-height: 2; + margin: 0px; + } + + div#test-passed + { + background-attachment: local; + background-image: linear-gradient(to bottom, blue 25%, orange 25% 50%, lime 50% 75%, purple 75% 100%); + } + </style> + + <script> + + document.documentElement.addEventListener("TestRendered", () => { + window.scroll(0, document.body.offsetHeight); + document.documentElement.classList.remove('reftest-wait'); + }); + + </script> + + <div>F</div> + + <!-- + Having more than 1 character may trigger + unneedlessly an horizontal scrollbar + --> + + <div id="test-passed">P</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-hidden.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-hidden.html new file mode 100644 index 0000000000..cbe3440e38 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-hidden.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Test: 'overflow: hidden' of 'Background-attachment' with value 'local'</title> +<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-394"> +<link rel="author" title="Lin peng" href="mailto:penglin22@huawei.com" /> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment" /> +<link rel="match" href="reference/background-attachment-local-hidden-ref.html"> +<style type="text/css"> + div { + border: 10px solid rgba(255,0,0,0.5); + width: 100px; + height: 100px; + border-radius: 40px; + background-color: lightblue; + overflow: hidden; + background-attachment: local; + } +</style> +<div></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-inline-002.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-inline-002.html new file mode 100644 index 0000000000..0ba846eeba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-inline-002.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> + + <html class="reftest-wait"> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: 'background-attachment: local' applied on an inline element</title> + + <!-- + + Created: November 25th 2023 + + Last modified: December 17th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> + <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-window-scroll"> + <link rel="match" href="reference/background-attachment-local-inline-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta name="assert" content="This test checks the interaction between an inline with a 'background-attachment: local' background-image and the expected behavior of the scroll() method which applies to the viewport window."> + + <style> + body + { + color: transparent; + font-family: Ahem; + font-size: 50vh; + height: 50vh; + line-height: 2; + margin: 0px; + } + + span#test-passed + { + background-attachment: local; + background-image: linear-gradient(to bottom, blue 25%, orange 25% 50%, lime 50% 75%, purple 75% 100%); + vertical-align: top; + } + </style> + + <script> + + document.documentElement.addEventListener("TestRendered", () => { + window.scroll(0, document.body.offsetHeight); + document.documentElement.classList.remove('reftest-wait'); + }); + + </script> + + <div>F</div> + + <div><span id="test-passed">P</span></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-scrolling.htm b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-scrolling.htm new file mode 100644 index 0000000000..c3f85d7a26 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local-scrolling.htm @@ -0,0 +1,37 @@ +<!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 Test: Scrolling when 'background-attachment: local'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> + <meta name="assert" content="If 'background-attachment: local' the background scrolls along with the element's contents (the UA may treat 'background-clip: border-box' as the same as 'background-clip: padding-box')." /> + <style type="text/css"> + div + { + width: 2in; + height: 2in; + border: 50px double black; + background-image: url("../support/cat.png"); + background-attachment: local; + overflow: scroll; + } + </style> + </head> + <body> + <p>Test passes if the images of all the cats scroll when the box is scrolled. (Presence of cats behind the double border is UA dependent). </p> + <div>Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text Filler Text + Filler Text Filler Text </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local.html new file mode 100644 index 0000000000..821c1c5445 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local.html @@ -0,0 +1,33 @@ +<!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 Test: 'Background-attachment' with value 'local' + </title> + <link rel="author" title="Melanie Archer" href="mailto:job@twobanjos.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="If 'background-attachment' is given the value 'local,' then the background image scrolls with the containing element's content when the element's content is scrolled" /> +<style type="text/css"> + #test-container { + background-attachment: local; + background-image: url("support/cat.png"); + background-repeat: no-repeat; + border: 1px solid blue; + height: 250px; + overflow: scroll; + padding: 100px 0 0; + width: 250px; + } + + </style> + </head> + <body> + <p> + Test passes if the image of the cat scrolls out of view when the blue-bordered containing block is scrolled. + </p> + <div id="test-container"> + Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/aqua-yellow-32x32.png b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/aqua-yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..42f8a2100b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/aqua-yellow-32x32.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1-ref.html new file mode 100644 index 0000000000..e3cc0375a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + background: green padding-box; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1.html new file mode 100644 index 0000000000..8cb76ee89c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; color}</title> +<link rel="match" href="attachment-local-clipping-color-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: green local border-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-2.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-2.html new file mode 100644 index 0000000000..c3895a9c25 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-2.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; color}</title> +<link rel="match" href="attachment-local-clipping-color-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: green local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3-ref.html new file mode 100644 index 0000000000..6a60077e8d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 255px; + padding: 25px 40px 0; + border: 10px dashed; + background: green content-box; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3.html new file mode 100644 index 0000000000..f81a804286 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; color}</title> +<link rel="match" href="attachment-local-clipping-color-3-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: green local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4-ref.html new file mode 100644 index 0000000000..db18749d0f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + border-radius: 50%; + background: green padding-box; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4.html new file mode 100644 index 0000000000..78e823c888 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; color}; border-radius</title> +<link rel="match" href="attachment-local-clipping-color-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: green local border-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-5.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-5.html new file mode 100644 index 0000000000..136b704bd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-5.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; color}; border-radius</title> +<link rel="match" href="attachment-local-clipping-color-4-ref.html" /> +<meta name="flags" content="dom" /> +<meta name=fuzzy content="0-10;0-160"> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: green local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6-ref.html new file mode 100644 index 0000000000..f23e2274a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; +} +#outer div { + background: green; + height: 500px; + margin-top: -15px; +} +p { + margin-top: 0; + padding-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6.html new file mode 100644 index 0000000000..fd13d7183a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; color}; border-radius</title> +<link rel="match" href="attachment-local-clipping-color-6-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: green local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1-ref.html new file mode 100644 index 0000000000..7cbaa919c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + background: url(aqua-yellow-32x32.png) padding-box top -15px left 0; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1.html new file mode 100644 index 0000000000..caca856de9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; image}</title> +<link rel="match" href="attachment-local-clipping-image-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: url(aqua-yellow-32x32.png) local; + background-clip: border-box; + background-origin: padding-box; /* Match the reference. */ +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-2.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-2.html new file mode 100644 index 0000000000..c5dca00cb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-2.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; image}</title> +<link rel="match" href="attachment-local-clipping-image-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: url(aqua-yellow-32x32.png) local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3-ref.html new file mode 100644 index 0000000000..f48df68f3e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 255px; + padding: 25px 40px 0; + border: 10px dashed; + background: url(aqua-yellow-32x32.png) content-box; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3.html new file mode 100644 index 0000000000..1e20e679a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; image}</title> +<link rel="match" href="attachment-local-clipping-image-3-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: url(aqua-yellow-32x32.png) local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4-ref.html new file mode 100644 index 0000000000..4432334d34 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) padding-box top -15px left 0; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4.html new file mode 100644 index 0000000000..9a8366242e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; image}; border-radius</title> +<link rel="match" href="attachment-local-clipping-image-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) local; + background-clip: border-box; + background-origin: padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-5.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-5.html new file mode 100644 index 0000000000..1d6f1a8c66 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-5.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; image}; border-radius</title> +<link rel="match" href="attachment-local-clipping-image-4-ref.html" /> +<meta name="flags" content="dom" /> +<meta name=fuzzy content="0-10;0-300"> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6-ref.html new file mode 100644 index 0000000000..a4e62038f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; +} +#outer div { + background: url(aqua-yellow-32x32.png); + height: 500px; + margin-top: -15px; +} +p { + margin-top: 0; + padding-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6.html new file mode 100644 index 0000000000..11cb068caf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; image}; border-radius</title> +<link rel="match" href="attachment-local-clipping-image-6-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2-ref.html new file mode 100644 index 0000000000..e61ccba6c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + border: solid; + background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0 0 0 -40px; + padding-top: 40px; +} +</style> +<div id=outer> + <div> + <p>Lorem ipsum dolor sit amet</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2.html new file mode 100644 index 0000000000..c358fd47f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2.html @@ -0,0 +1,35 @@ +<!doctype html> +<title>CSS Test: background-attachment: local; positioning area</title> +<link rel="match" href="attachment-local-positioning-2-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + border: solid; + /* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */ + /* With scrolling, effective position is 178px 278px */ + background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; +} +</style> +<div id=outer> + <div> + <p>Lorem ipsum dolor sit amet</p> + </div> +</div> +<script> +var outer = document.getElementById('outer'); +outer.scrollLeft = 40; +outer.scrollTop = 60; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3-ref.html new file mode 100644 index 0000000000..d3e1d0bded --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + border: solid; + background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; + text-align: right; + position: relative; + top: -60px; + left: -40px; +} +</style> +<div id=outer> + <div> + <p>Lorem ipsum dolor sit amet</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3.html new file mode 100644 index 0000000000..b370048e7a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3.html @@ -0,0 +1,36 @@ +<!doctype html> +<title>CSS Test: background-attachment: local; positioning area with dir=rtl</title> +<link rel="match" href="attachment-local-positioning-3-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + border: solid; + /* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */ + /* With scrolling, effective position is 178px 278px */ + background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; +} +</style> +<div id=outer dir=rtl> + <div> + <p>Lorem ipsum dolor sit amet</p> + </div> +</div> +<script> +var outer = document.getElementById('outer'); +// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values. +outer.scrollLeft = -10; +outer.scrollTop = 60; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4-ref.html new file mode 100644 index 0000000000..8e5b383d7c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + border: solid; + background: url(aqua-yellow-32x32.png) local no-repeat -10px -10px; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; + text-align: right; + position: relative; + top: -10px; + left: -10px; +} +</style> +<div id=outer> + <div> + <p>Lorem ipsum dolor sit amet</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4.html new file mode 100644 index 0000000000..d0dbfe166e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4.html @@ -0,0 +1,35 @@ +<!doctype html> +<title>CSS Test: background-attachment: local; positioning area with dir=rtl, top left</title> +<link rel="match" href="attachment-local-positioning-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + border: solid; + /* With scrolling, effective position is -10px -10px */ + background: url(aqua-yellow-32x32.png) local no-repeat 0 0; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; +} +</style> +<div id=outer dir=rtl> + <div> + <p>Lorem ipsum dolor sit amet</p> + </div> +</div> +<script> +var outer = document.getElementById('outer'); +// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values. +outer.scrollLeft = -40; +outer.scrollTop = 10; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5-ref.html new file mode 100644 index 0000000000..ad7c577737 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 30px 25px; + overflow: hidden; + height: 200px; +} +p { + padding-left: 30px; + padding-top: 125px; + height: 500px; +} +</style> +<div> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5.html new file mode 100644 index 0000000000..ae02307354 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; origin: content-box}; positioning area</title> +<link rel="match" href="attachment-local-positioning-5-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +div { + background: url(aqua-yellow-32x32.png) local no-repeat content-box; + overflow: hidden; + height: 200px; + padding: 40px 30px; +} +p { + padding-top: 100px; + height: 500px; +} +</style> +<div> + <p>Test</p> +</div> +<script> +document.getElementsByTagName('div')[0].scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1-ref.html new file mode 100644 index 0000000000..b9cd919bc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1-ref.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: scroll</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 100px 100px; + overflow: hidden; + height: 200px; +} +p { + padding-top: 40px; + height: 500px; +} +</style> +<div> + <p>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1.html new file mode 100644 index 0000000000..67bccc350e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS Test: background-attachment: scroll; positioning area</title> +<link rel="match" href="attachment-scroll-positioning-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 100px 100px; + overflow: hidden; + height: 200px; +} +p { + padding-top: 100px; + height: 500px; +} +</style> +<div> + <p>Test</p> +</div> +<script> +document.getElementsByTagName('div')[0].scrollTop = 60; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-001-ref.html new file mode 100644 index 0000000000..ee25fd250e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-001-ref.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<style> + div { + background: linear-gradient(rgba(0,255,0,0.5), rgba(0,0,255,0.5)), linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)); + background-size: 100px 100px, 100px 100px; + background-position: 50px 50px, 0 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-001.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-001.html new file mode 100644 index 0000000000..88bc2845e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-001.html @@ -0,0 +1,15 @@ +<!doctype HTML> +<title>Background-attachment: scroll should be positioned relative to the root element and should extend to cover the entire canvas in the presence of fixed backgrounds</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#root-background"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment"> +<link rel="match" href="background-attachment-margin-root-001-ref.html"> +<style> + html { + background: linear-gradient(rgba(0,255,0,0.5), rgba(0,0,255,0.5)), linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)); + background-attachment: scroll, fixed; + background-size: 100px 100px, 100px 100px; + height: 300px; + margin: 50px; + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-002-ref.html new file mode 100644 index 0000000000..9fb084071c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-002-ref.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<style> + div { + background: linear-gradient(rgba(0,255,0,0.5), rgba(0,0,255,0.5)), linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)); + background-size: 100px 100px, 100px 100px; + background-position: 0 0, 0 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-002.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-002.html new file mode 100644 index 0000000000..4ee882f9da --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-margin-root-002.html @@ -0,0 +1,15 @@ +<!doctype HTML> +<title>Background-attachment: fixed should be positioned relative to the view and should extend to cover the entire canvas in the presence of scroll backgrounds</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#root-background"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment"> +<link rel="match" href="background-attachment-margin-root-002-ref.html"> +<style> + html { + background: linear-gradient(rgba(0,255,0,0.5), rgba(0,0,255,0.5)), linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)); + background-attachment: fixed, scroll; + background-size: 100px 100px, 100px 100px; + height: 300px; + margin: 50px; + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-001.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-001.html new file mode 100644 index 0000000000..9c677e547f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background-clip - initial and supported values</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> + <meta name="flags" content="dom" /> + <meta name="assert" content="Check if background-clip initial value is border-box and supports values border-box, padding-box and content-box" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"), + "border-box", "background-clip initial value"); + }, "background-clip_initial"); + + document.getElementById("test").style.backgroundClip = "border-box"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"), + "border-box", "background-clip supporting value"); + }, "background-clip_border-box"); + + document.getElementById("test").style.backgroundClip = "padding-box"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"), + "padding-box", "background-clip supporting value"); + }, "background-clip_padding-box"); + + document.getElementById("test").style.backgroundClip = "content-box"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"), + "content-box", "background-clip supporting value"); + }, "background-clip_content-box"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-002.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-002.html new file mode 100644 index 0000000000..286e482ef2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-clip - initial value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <link rel="match" href="reference/background-clip-002-ref.html"> + <meta name="assert" content="Background-clip with initial value implies to paint the background within (clipped to) the border box."> + <style> + #ref-overlapped-red { + background-color: red; + height: 160px; + width: 160px; + } + #test-overlapping-green { + background-color: green; + border: transparent dotted 5px; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-003.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-003.html new file mode 100644 index 0000000000..e8b03bdf43 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-clip - border-box keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <link rel="match" href="reference/background-clip-002-ref.html"> + <meta name="assert" content="Background-clip with 'border-box' implies to paint the background within (clipped to) the border box."> + <style> + #ref-overlapped-red { + background-color: red; + height: 160px; + width: 160px; + } + #test-overlapping-green { + background-clip: border-box; + background-color: green; + border: transparent dotted 5px; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-004.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-004.html new file mode 100644 index 0000000000..d2bf3e00b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-clip - padding-box keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <link rel="match" href="reference/background-clip-004-ref.html"> + <meta name="assert" content="Background-clip with 'padding-box' implies to paint the background within (clipped to) the padding box."> + <style> + #test-overlapped-red { + background-clip: padding-box; + background-color: red; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + #ref-overlapping-green { + background-color: green; + bottom: 155px; + height: 150px; + left: 5px; + position: relative; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test-overlapped-red"></div> + <div id="ref-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-005.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-005.html new file mode 100644 index 0000000000..426b854660 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-clip - content-box keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <link rel="match" href="reference/background-clip-005-ref.html"> + <meta name="assert" content="Background-clip with 'content-box' implies to paint the background within (clipped to) the content box."> + <style> + #test-overlapped-red { + background-clip: content-box; + background-color: red; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + #ref-overlapping-green { + background-color: green; + bottom: 130px; + height: 100px; + left: 30px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test-overlapped-red"></div> + <div id="ref-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-006.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-006.html new file mode 100644 index 0000000000..643865a149 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-006.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-clip - inherit keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <link rel="match" href="reference/background-clip-005-ref.html"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#value-types" title="2.2. Value Types"> + <!-- + " + all properties defined in this specification also accept + the inherit keyword as their property value + " + CSS Backgrounds and Borders Module Level 3 + 2.2. Value Types + http://www.w3.org/TR/css3-background/#value-types + --> + <meta name="assert" content="Background-clip with 'inherit' implies to inherit its parent element value to paint the background area."> + <style> + #container { + background-clip: content-box; + } + #test-overlapped-red { + background-clip: inherit; + background-color: red; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + #ref-overlapping-green { + background-color: green; + bottom: 130px; + height: 100px; + left: 30px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test-overlapped-red"></div> + <div id="ref-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-007.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-007.html new file mode 100644 index 0000000000..09596b2772 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background and Borders Test: background-clip: content-box with background-color</title> + <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com" /> <!-- 2012-10-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip"> + <meta name="assert" content="When 'background-clip' is set to 'content-box', then the background-color shines only through the content area; it does not shine through the padding area nor the border area."> + <link rel="match" href="reference/ref-if-there-is-no-red.xht"> + <style> + div + { + background-clip: content-box; + background-color: red; + height: auto; + padding: 50px; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-008.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-008.html new file mode 100644 index 0000000000..5994edfb0e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-008.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background and Borders Test: background-clip: padding-box with background-color</title> + <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-04-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <meta name="assert" content="When 'background-clip' is set to 'padding-box', then the background painting area is clipped at the edges of the padding of the element. In this test, the padding box is 0px tall and as wide as the body element; therefore, red should not be visible."> + <link rel="match" href="reference/ref-if-there-is-no-red.xht"> + <style> + div + { + background-clip: padding-box; + background-color: red; + border: transparent solid 50px; + height: auto; + padding: 0px; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-009.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-009.html new file mode 100644 index 0000000000..d2dae10761 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-009.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background and Borders Test: background-clip: border-box with background-color</title> + <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-04-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <meta content="When 'background-clip' is set to 'border-box', then the background painting area is clipped at the edges of the borders of the element. In this test, the border box is 96px tall and 96px wide and is made from only the borders." name="assert"> + <link rel="match" href="reference/ref-filled-black-96px-square.xht"> + <style> + div + { + background-clip: border-box; + background-color: black; + border: transparent solid 48px; + height: auto; + width: 0px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled black square.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-010.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-010.html new file mode 100644 index 0000000000..856846d19a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-010.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> + +<html> + + <head> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: background-clip - content-box with background-color</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> + <link rel="match" href="reference/ref-if-there-is-no-red.xht"> + + <meta content="When 'background-clip' is set to 'content-box', then the background painting area is clipped at the edges of the content of the element. In this test, height is 'auto', therefore its used value is '0px'; width is 'auto', therefore its used value is as wide as the body element. So, the content box is 0px tall and as wide as the body element; therefore, red should not be visible." name="assert"> + + <style type="text/css"> + div + { + background-clip: content-box; + background-color: red; + border: transparent solid 20px; + height: auto; + padding: 30px; + width: auto; + } + </style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-color-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-color-ref.html new file mode 100644 index 0000000000..0bd414cd06 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-color-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<style> + .refSquare { + margin: 10px; + width: 30px; + height: 30px; + background-color: green; + } +</style> +<p>There should be three green 30x30 px squares below.</p> +<div>border-box</div> +<div class="refSquare"></div> +<div>padding-box</div> +<div class="refSquare"></div> +<duv>content-box</div> +<div class="refSquare"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-color-repaint-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-color-repaint-ref.html new file mode 100644 index 0000000000..81e95173e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-color-repaint-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<p>There should be a green square below.</p> +<div style="background-color:green;width:150px;height:150px"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-color-repaint.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-color-repaint.html new file mode 100644 index 0000000000..4a5cee0800 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-color-repaint.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: background-clip color background repaint</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="match" href="background-clip-color-repaint-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#the-background-clip"> +<style> + #outer { + width: 150px; + height: 150px; + background-color: red; + } + #inner { + border: 30px dashed green; + padding: 30px; + width: 30px; + height: 30px; + background-color: green; + background-clip: content-box; + } +</style> +<p>There should be a green square below.</p> +<div id="outer"> + <div id="inner"></div> +</div> +<script> + requestAnimationFrame(function(){ + requestAnimationFrame(function(){ + inner.style.backgroundClip = "border-box"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-color.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-color.html new file mode 100644 index 0000000000..b09d8086ec --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-color.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: background-clip color backgrounds</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="match" href="background-clip-color-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#the-background-clip"> +<style> + #borderBoxHelper { + margin: 10px; + width: 30px; + height: 30px; + background-color: red; + } + #borderBox { + border: 6px dashed green; + padding: 6px; + width: 6px; + height: 6px; + background-color: green; + background-clip: border-box; + } + #paddingBoxHelper { + width: 30px; + height: 30px; + background-color: red; + } + #paddingBox { + border: 10px dashed white; + padding: 10px; + width: 10px; + height: 10px; + background-color: green; + background-clip: padding-box; + } + #contentBoxHelper { + width: 30px; + height: 30px; + background-color: red; + } + #contentBox { + padding: 10px; + width: 30px; + height: 30px; + background-color: green; + background-clip: content-box; + } +</style> +<p>There should be three green 30x30 px squares below.</p> +<div>border-box</div> +<div id="borderBoxHelper"> + <div id="borderBox"></div> +</div> +<div>padding-box</div> +<div class="paddingBoxHelper"> + <div id="paddingBox"></div> +</div> +<div>content-box</div> +<div class="contentgBoxHelper"> + <div id="contentBox"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-001.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-001.html new file mode 100644 index 0000000000..f0777e88c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: background-clip Reference</title> +<link rel="author" title="James Wang" href="mailto:wangjian@ucweb.com"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> +<link rel="match" href="reference/background-clip-content-box-ref.html"> +<style> +#test-color-blue { + background-color: blue; + height: 200px; + position: absolute; + width: 200px; +} +#test-color-orange { + background-clip: content-box; + background-color: rgba(255, 165, 0, 1); + height: 180px; + padding: 10px; + position: absolute; + width: 180px; +} +</style> +<p>Test passes if the orange box has a 10px width blue edge.</p> +<!-- background --> +<div id="test-color-blue"></div> +<div id="test-color-orange"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-002.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-002.html new file mode 100644 index 0000000000..7dfa732643 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-002.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>background-clip: content-box with fractional width/position</title> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +.back { + background-color: red; + width: 100px; + display: flex; +} + +.left { + flex-basis: 50%; + border-left: 5px solid green; +} + +.right { + flex-basis: 50%; + border-right: 6px solid green; +} + +.left, .right { + background-color: green; + background-clip: content-box; + height: 100px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="back"> + <div class="left"></div> + <div class="right"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box.html new file mode 100644 index 0000000000..5dc2b477d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + + <title>CSS Background and Borders Test:background-clip_content-box</title> + <link rel="author" title="anping" href="mailto:zhuanping123@163.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> + <meta name="match" content="reference/reference.html" /> + <meta name="assert" content="Test passes if the background color is limited to the content only and border is blue dotted without red"> + + <style> + div{ + position:absolute; + } + + #test{ + background-clip: content-box; + border: 5px dotted blue; + height: 100px; + left: 10px; + padding: 10px; + top: 10px; + width: 100px; + background-color:red; + } + </style> + </head> + <body> + <p> + "Test passes if the background color is limited to the content only and border is blue dotted without red." + </p> + <div id="container"> + <div id="test"></div> + </div> + </body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-001.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-001.html new file mode 100644 index 0000000000..ed2b21b148 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-001.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>background-clip: padding-box with fractional border-width</title> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#back { + width: 100px; + background-color: red; +} +#target { + box-sizing: border-box; + width: 100px; + height: 100px; + border-top: 49.75px solid green; + border-bottom: 49.75px solid green; + background-color: green; + background-clip: padding-box; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="back"> + <div id="target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius.html new file mode 100644 index 0000000000..22d7bd9d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + +<title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title> +<link rel="author" title="Lea Verou" href="http://lea.verou.me" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#corner-shaping" /> +<link rel="match" href="reference/background-clip-padding-box-with-border-radius-ref.html" /> +<meta name="fuzzy" content="maxDifference=0-29;totalPixels=0-80" /> +<meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness." /> +<style> +div { + position: absolute; +} + +.container { + position: relative; + width: 140px; + height: 140px; + margin: 10px; +} + +.ref { + top: 10px; + left: 10px; + height: 140px; + width: 140px; + border-radius: 30px; +} + +.test { + width: 100px; + height: 100px; + padding: 20px; + border: 10px solid transparent; + border-radius: 40px; + background-clip: padding-box; +} + +.behind { + background-color: red; +} + +.top { + background-color: green; +} + +.ref.top { + width: 144px; + height: 144px; + left: 8px; + top: 8px; +} + +.test.top { + width: 104px; + height: 104px; + left: -2px; + top: -2px; +} +</style> + +</head> +<body> + +<p>Test passes if there are two filled green rounded squares and <strong>no red</strong>.</p> +<div class="container"> + <div class="test behind"></div> + <div class="ref top"></div> +</div> + +<div class="container"> + <div class="ref behind"></div> + <div class="test top"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-root.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-root.html new file mode 100644 index 0000000000..8f9f5f3ebd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip-root.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> + +<head> + +<title>CSS Backgrounds and Borders Test: background-clip on root</title> +<link rel="author" title="Lea Verou" href="http://lea.verou.me" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> +<meta name="flags" content="image" /> +<meta name="assert" content="The root element has a different background painting area, and thus the 'background-clip' property has no effect when specified on it." /> +<style> + +html { + padding: 20px; + background: url('support/1x1-green.png'), red; + background-clip: content-box, border-box; +} + +</style> + +</head> +<body> + +<p>Test passes if there is green and <strong>no red</strong>.</p> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box.html new file mode 100644 index 0000000000..12763856c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:border-box</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." > + + <meta charset="utf-8"> + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : border-box; + } + + +</style> + + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br> +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_position.html new file mode 100644 index 0000000000..300554754a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_position.html @@ -0,0 +1,72 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:border-box & background-position</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." > + + <meta charset="utf-8"> + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : border-box; + background-position: -15px -15px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br> +When background-position is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip: + </div> + + <div class="view case" > + Test background-clip: + </div> + + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_radius.html new file mode 100644 index 0000000000..f01d5e69ef --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_radius.html @@ -0,0 +1,72 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:border-box & border-radius</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." > + + <meta charset="utf-8"> + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : border-box; + border-radius: 60px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br> +When border-radius is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div id="border-box" class="view case no-repeat" > + Test background-clip: + </div> + + <div id="border-box" class="view case" > + Test background-clip: + </div> + + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_size.html new file mode 100644 index 0000000000..13617d3899 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_size.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:border-box & background-size</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." > + + <meta charset="utf-8"> + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : border-box; + background-size : 50%; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br> +When background-size is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div id="border-box" class="view case no-repeat" > + Test background-clip: + </div> + + <div id="border-box" class="view case" > + Test background-clip: + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box.html new file mode 100644 index 0000000000..94fe5c1e1c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:content-box</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : content-box; + } + + +</style> + + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br> +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_position.html new file mode 100644 index 0000000000..7f1cc4d556 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_position.html @@ -0,0 +1,72 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:content-box & background-position</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : content-box; + background-position: -15px -15px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br> +When background-position is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_radius.html new file mode 100644 index 0000000000..0aea268973 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_radius.html @@ -0,0 +1,72 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:content-box & border-radius</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : content-box; + border-radius: 60px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br> +When border-radius is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_size.html new file mode 100644 index 0000000000..efe2eda39e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_size.html @@ -0,0 +1,70 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:content-box & background-size</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : content-box; + background-size : 50%; + } + + </style> + +</head> +<body> +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br> +When background-size is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box.html new file mode 100644 index 0000000000..eb5c44fcad --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box.html @@ -0,0 +1,72 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:padding-box</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : padding-box; + } + + +</style> + + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ). +</div> + +<div class="test-case"> + + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_position.html new file mode 100644 index 0000000000..912d804227 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_position.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:padding-box & background-position</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : padding-box; + background-position: -15px -15px; + } + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br> +When background-position is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_radius.html new file mode 100644 index 0000000000..8e8a56cf69 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_radius.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:padding-box & border-radius</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : padding-box; + border-radius: 60px; + } + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br> +When border-radius is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_size.html new file mode 100644 index 0000000000..c163043ad0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_size.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-clip:padding-box & background-size</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" > + + <meta charset="utf-8"> + + +<style type="text/css"> + + .infomation { + padding : 10px; + font-size : 16pt; + margin : 5px; + } + + .test-case { + padding : 5px; + margin : 5px; + } + + .view { + border : 30px solid rgba(60,150,255,0.4); + width : 320px; + height : 240px; + padding : 30px; + margin : 10px; + font-size : 16pt; + color : #ff9933; + background-image : url("../support/css3.png"); + } + + .no-repeat { + background-repeat : no-repeat; + } + + .case { + background-clip : padding-box; + background-size : 50%; + } + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br> +When background-size is enabled, the browser should clip the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-clip + </div> + + <div class="view case" > + Test background-clip + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html new file mode 100644 index 0000000000..379ad36992 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Filled Background with Rounded Corner</title> +<style> + #a { + width: 100px; + height: 80px; + border: 20px blue solid; + border-top-right-radius: 20px; + background-color: green; + background-clip: border-box; + } + #shield { + position: absolute; + width: 30px; + height: 30px; + left: 120px; + top: 5px; + background-color: black; + } +</style> +<body> + <div id="a"></div> + <!-- Hide the curved outside border to deal with imprecise rendering. --> + <div id="shield"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner.html new file mode 100644 index 0000000000..3453c5bc8f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Filled Background with Rounded Corner</title> +<link rel="match" href="clip-rounded-corner-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> +<style> + #b { + width: 100px; + height: 80px; + border: 20px blue solid; + border-top-right-radius: 20px; + background-color: green; + background-clip: content-box; + } + #shield { + position: absolute; + width: 30px; + height: 30px; + left: 120px; + top: 5px; + background-color: black; + } +</style> +<body> + <div id="b"></div> + <!-- Hide the curved outside border to deal with imprecise rendering. --> + <div id="shield"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html new file mode 100644 index 0000000000..2619a196d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + .text { + background-color: blue; + color: transparent; + font: 50px/1 monospace; + background-clip: text; + height: 200px; + } + .prev { + height: 100px; + } + p { + color: transparent; + } +</style> +<div class="text"> + <div class="prev"></div> + <div class="inner"> + <p>XxX</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html new file mode 100644 index 0000000000..ee6b45c2dd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html @@ -0,0 +1,39 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: background-clip: text is invalidated properly on text position changes</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1525372"> +<link rel="author" href="mailto:mwoodrow@mozilla.com" title="Matt Woodrow"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="clip-text-dynamic-2-ref.html"> +<style> + .text { + background-color: blue; + color: transparent; + font: 50px/1 monospace; + background-clip: text; + height: 200px; + } + .prev { + height: 10px; + } + p { + color: transparent; + } +</style> +<div class="text"> + <div class="prev"></div> + <div class="inner"> + <p>XxX</p> + </div> +</div> +<script> +onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.querySelector(".prev").style.height = "100px"; + document.documentElement.className = ""; + }) + }) +} +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex-ref.html new file mode 100644 index 0000000000..0bcbc0bc13 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.clip { + font-size: 80px; + color: green; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} +</style> +<div class="clip flex">flex</div> +<div class="clip inline-flex">inline-flex</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex.html new file mode 100644 index 0000000000..618c8c1dbc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>background-clip:text with display:flex</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text"> +<link rel="match" href="clip-text-flex-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.clip { + font-size: 80px; + color: transparent; + background-color: green; + background-clip: text; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} +</style> +<div class="clip flex">flex</div> +<div class="clip inline-flex">inline-flex</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html new file mode 100644 index 0000000000..455daa7aea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS test reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="stylesheet" href="/fonts/ahem.css"> + + <style> + div + { + color: green; + font-size: 30px; + font-family: Ahem; + line-height: 1.5; + } + </style> + + <p>Test passes if there are 2 green stripes and if the top stripe is half the width of the bottom stripe. + + <div>12345<br>1234567890</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html new file mode 100644 index 0000000000..88ad111eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: 'background-clip: text' and painting of multi-line text</title> + + <!-- + + Inspired by + + http://wpt.live/css/css-backgrounds/background-clip/clip-text-multi-line.html + + For more info, see + + https://github.com/web-platform-tests/wpt/pull/30812#issuecomment-1314514987 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" href="mailto:mmaxfield@apple.com" title="Myles C. Maxfield"> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text"> + <link rel="match" href="clip-text-multi-line-ref.html"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5846" /> + <style> + div + { + background-clip: text; + background-color: red; + background-image: linear-gradient(green, green); + color: transparent; + font-family: Ahem; + font-size: 30px; + line-height: 1.5; + } + </style> + + <p>Test passes if there are 2 green stripes and if the top stripe is half the width of the bottom stripe. + + <div>12345<br>1234567890</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt b/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt new file mode 100644 index 0000000000..52c47ebba9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt @@ -0,0 +1,12 @@ +background-clip/border-box.html +background-clip/border-box_with_position.html +background-clip/border-box_with_radius.html +background-clip/border-box_with_size.html +background-clip/content-box.html +background-clip/content-box_with_position.html +background-clip/content-box_with_radius.html +background-clip/content-box_with_size.html +background-clip/padding-box.html +background-clip/padding-box_with_position.html +background-clip/padding-box_with_radius.html +background-clip/padding-box_with_size.html diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip_padding-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip_padding-box.html new file mode 100644 index 0000000000..354cbba907 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip_padding-box.html @@ -0,0 +1,36 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip"> + <link rel="match" href="reference/background_clip_padding-box.html"> + <meta name="assert" content="Test passes if border is blue and dotted without red background"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: absolute; + } + .test { + background-color: red; + height: 130px; + left: 5px; + top: 5px; + width: 130px; + border: blue dotted 5px ; + position: absolute; + background-clip: padding-box; + } + + + </style> +</head> +<body> +<p>Test passes if border is blue and dotted without red background </p> + <div class="container"> + <div class="test"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-applied-to-rounded-inline-element.htm b/testing/web-platform/tests/css/css-backgrounds/background-color-applied-to-rounded-inline-element.htm new file mode 100644 index 0000000000..8199a45d16 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-applied-to-rounded-inline-element.htm @@ -0,0 +1,24 @@ +<!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 Test: 'Background-color' applied to a rounded inline element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#background-color" /> + <meta name="assert" content="'Background-color' is clipped according to the 'background-clip' property in an inline element." /> + <style type="text/css"> + div + { + border-radius: 20px; + background-color: orange; + background-clip: border-box; + color: orange; + padding: 15px; + display: inline; + } + </style> + </head> + <body> + <p>Test passes if there is an orange box with rounded corners below.</p> + <div>Filler Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-001.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-001.html new file mode 100644 index 0000000000..4cfc36033d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: propagate body background to viewport</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#body-background"> +<link rel="match" href="background-color-body-propagation-ref.html"> +<style> + html { + background-color: transparent; + background-image: none; + } + body { + background-color: green; + margin: 0; + } +</style> +<p>The viewport should have a green background.</p> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-002.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-002.html new file mode 100644 index 0000000000..1c42637e50 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: body background not propagating when html does</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#body-background"> +<link rel="match" href="background-color-body-propagation-ref.html"> +<style> + html { + background-color: green; + background-image: none; + } + body { + background-color: red; + margin: 0; + } + p { + background: green; + } +</style> +<p>The viewport should have a green background.</p> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-003.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-003.html new file mode 100644 index 0000000000..8106822a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: propagate body background while display changes</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#body-background"> +<link rel="match" href="background-color-body-propagation-ref.html"> +<style>body { margin: 0 }</style> +<p>The viewport should have a green background.</p> +<script> + document.body.offsetTop; + document.body.style = "display:inline;background:green"; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-004.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-004.html new file mode 100644 index 0000000000..ede419096f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-004.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: don't propagate body background when display:none</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="../reference/blank.html"> +<style> + body { + background: red; + display: none + } +</style> +<body></body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-005.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-005.html new file mode 100644 index 0000000000..05c5421977 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-005.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: don't propagate body background when html is display:none</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="../reference/blank.html"> +<style> + html { display: none; } + body { background: red; } +</style> +<body></body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-006.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-006.html new file mode 100644 index 0000000000..4c58cb9dc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-006.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Backgrounds and Borders Test: don't propagate body background when html is display:none dynamic</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="../reference/blank.html"> +<style> + body { background: red; } +</style> +<script> + window.onload = () => { + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.display = "none"; + document.documentElement.classList.remove("reftest-wait"); + })); + }; +</script> +<body></body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-007.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-007.html new file mode 100644 index 0000000000..6deda8dcdb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-007.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: don't propagate body background when display:contents</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="../reference/blank.html"> +<style> + body { + background: red; + display: contents + } +</style> +<body></body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-008.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-008.html new file mode 100644 index 0000000000..250e4c245b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-008.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: Do not propagate body background when html root is contained</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="background-color-no-body-propagation-ref.html"> +<style> + html { contain: paint; } + body { background: green; } +</style> +<body>This text should have a green background.</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-009.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-009.html new file mode 100644 index 0000000000..b681543e3d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-009.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: Do not propagate body background when body is contained</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="background-color-no-body-propagation-ref.html"> +<style> + body { contain: paint; background: green; } +</style> +<body>This text should have a green background.</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-ref.html new file mode 100644 index 0000000000..1a138740de --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-body-propagation-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html style="background:green"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<body style="margin:0"> +<p>The viewport should have a green background.</p> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-border-box.htm b/testing/web-platform/tests/css/css-backgrounds/background-color-border-box.htm new file mode 100644 index 0000000000..c22aff6495 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-border-box.htm @@ -0,0 +1,34 @@ +<!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 Test: Background color clipped to 'border-box'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-color" /> + <meta name="assert" content="Background color is clipped according to the 'background-clip' value associated with the bottom-most background image." /> + <style type="text/css"> + #test + { + width: 250px; + height: 250px; + border: 10px dashed purple; + padding: 10px; + background-image: url("support/blue_color.png"), url("support/orange_color.png"), url("support/green_color.png"); + background-repeat: no-repeat; + background-clip: padding-box, content-box, border-box; + background-position: 30px 30px, 60px 60px, 90px 90px; + background-color: black; + } + #parent + { + width: 290px; + background: red; + } + </style> + </head> + <body> + <p>Test passes if green is visible on the page and there is no red visible on the page.</p> + <div id="parent"> + <div id="test"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-clip.html b/testing/web-platform/tests/css/css-backgrounds/background-color-clip.html new file mode 100644 index 0000000000..961e161388 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-clip.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Background Color Clip</title> +<link rel="match" href="reference/background-color-clip.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<meta name="assert" content="Check that the background color is clipped according to the background-clip value associated with the bottom-most background image layer."> +<style> + div { + width: 120px; + height: 100px; + background-color: green; + background-clip: border-box, content-box, border-box; + background-image: none, none; + border-style: solid; + border-width: 10px; + border-color: transparent; + } +</style> +<div></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-no-body-propagation-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-color-no-body-propagation-ref.html new file mode 100644 index 0000000000..87ddae625a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-no-body-propagation-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>CSS Reftest Reference</title> +<div style="background-color:green">This text should have a green background.</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-root-propagation-001.html b/testing/web-platform/tests/css/css-backgrounds/background-color-root-propagation-001.html new file mode 100644 index 0000000000..0fa84ef2f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-root-propagation-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: don't propagate html background when display:none</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="../reference/blank.html"> +<style> + html { + background: red; + display: none + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-color-root-propagation-002.html b/testing/web-platform/tests/css/css-backgrounds/background-color-root-propagation-002.html new file mode 100644 index 0000000000..0256f66bc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-color-root-propagation-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Backgrounds and Borders Test: don't propagate html background when display:none dynamic</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds"> +<link rel="match" href="../reference/blank.html"> +<style> + html { background: red; } +</style> +<script> + window.onload = () => { + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.display = "none"; + document.documentElement.classList.remove("reftest-wait"); + })); + }; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-gradient-subpixel-fills-area.html b/testing/web-platform/tests/css/css-backgrounds/background-gradient-subpixel-fills-area.html new file mode 100644 index 0000000000..78d4c99c06 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-gradient-subpixel-fills-area.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Background Test: Gradient backgrounds should fill the positioning area</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin"> + <link rel="match" href="reference/background-gradient-subpixel-fills-area-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-6800"> + <style> + ul { + width: 396.875px; + overflow: auto; + padding: 0; + list-style: none; + background-color: red; + } + + li { + float: left; + } + + div { + display: block; + width: 19.6875px; + height: 17px; + padding: 20px 10px; + background: linear-gradient(to bottom, green 0%, darkgreen 100%) darkgreen; + } + </style> +</head> +<body> + <ul> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + <li><div></div></li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-001.html b/testing/web-platform/tests/css/css-backgrounds/background-image-001.html new file mode 100644 index 0000000000..af75ae1772 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Backgrounds: background-image div</title> +<link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> +<link rel="match" href="reference/background-image-001-ref.html"> +<meta name="assert" content="Test checks that background-image displays raster image for div background."> +<style> + .container { + top:50px; + left:50px; + width: 100px; + height: 100px; + background-image: url("support/green.png"); + background-color: red; + } +</style> +<body> + <p> Test passes if green image shows and no red visable.</p> + <div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-002.html b/testing/web-platform/tests/css/css-backgrounds/background-image-002.html new file mode 100644 index 0000000000..6e0ea774f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Backgrounds: background-image layered background on div</title> +<link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> +<link rel="match" href="reference/background-image-001-ref.html"> +<meta name="assert" content="Test checks that background-image displays layerd images in the correct order for div background."> +<style> + .container { + top:50px; + left:50px; + width: 100px; + height: 100px; + background-image: url("support/green.png"), url("support/red.png"); + background-color: red; + } +</style> +<body> + <p> Test passes if green image shows and no red visable.</p> + <div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-003.html b/testing/web-platform/tests/css/css-backgrounds/background-image-003.html new file mode 100644 index 0000000000..dd89391c4e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Backgrounds: background-image <a></title> +<link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> +<link rel="match" href="reference/background-image-001-ref.html"> +<meta name="assert" content="Test checks that background-image displays raster image for <a> tag."> +<style> + .container { + top:50px; + left:50px; + width: 100px; + height: 100px; + } + + a { + width:100px; + height:100px; + color:transparent; + font-size: 50px; + background-image: url("support/green.png"); + background-color: red; + display: block; + } +</style> +<body> + <p> Test passes if green image shows and no red visable.</p> + <div class="container"> + <a href="#">x</a> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-004.html b/testing/web-platform/tests/css/css-backgrounds/background-image-004.html new file mode 100644 index 0000000000..db2953ed2c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Backgrounds: background-image <a> layered images</title> +<link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> +<link rel="match" href="reference/background-image-001-ref.html"> +<meta name="assert" content="Test checks that background-image displays multiple images in correct order on <a> tag."> +<style> + .container { + top:50px; + left:50px; + width: 100px; + height: 100px; + } + + a { + width:100px; + height:100px; + color:transparent; + font-size: 50px; + background-image: url("support/green.png"), url("support/red.png"); + background-color: red; + display: block; + } +</style> +<body> + <p> Test passes if green image shows and no red visable.</p> + <div class="container"> + <a href="#">x</a> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-005.html b/testing/web-platform/tests/css/css-backgrounds/background-image-005.html new file mode 100644 index 0000000000..acee15e713 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Backgrounds: background-image p tag</title> +<link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> +<link rel="match" href="reference/background-image-001-ref.html"> +<meta name="assert" content="Test checks that background-image displays raster image for p tag."> +<style> + .container { + top:50px; + left:50px; + width: 100px; + height: 100px; + } + + .container p { + width:100px; + height:100px; + color:transparent; + font-size: 50px; + background-image: url("support/green.png"); + background-color: red; + display: block; + margin: 0px; + } +</style> +<body> + <p> Test passes if green image shows and no red visable.</p> + <div class="container"> + <p>x</p> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-006.html b/testing/web-platform/tests/css/css-backgrounds/background-image-006.html new file mode 100644 index 0000000000..77d97593f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-006.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Backgrounds: background-image p layered images</title> +<link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> +<link rel="match" href="reference/background-image-001-ref.html"> +<meta name="assert" content="Test checks that background-image displays multiple images in correct order on p tag."> +<style> + .container { + top:50px; + left:50px; + width: 100px; + height: 100px; + } + + .container p { + width:100px; + height:100px; + color:transparent; + font-size: 50px; + background-image: url("support/green.png"), url("support/red.png"); + background-color: red; + display: block; + margin: 0px; + } +</style> +<body> + <p> Test passes if green image shows and no red visable.</p> + <div class="container"> + <p>x</p> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-007.html b/testing/web-platform/tests/css/css-backgrounds/background-image-007.html new file mode 100644 index 0000000000..b532dd6397 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-007.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: ::first-letter with multiple background images</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#first-letter-styling"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <!-- + + More information: + + https://github.com/web-platform-tests/wpt/issues/22261 + + --> + + <meta name="assert" content="This test checks that 'background-image' applies to ::first-letter pseudo-element and that, in case of multiple background images, the first specified one must be on top (closest to the user)."> + + <style> + div + { + color: transparent; + /* So that background shines through both "A" and "Z" glyphs */ + line-height: 1; + } + + div::first-letter + { + background-color: red; + background-image: + url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: green'></svg>"), + url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: red'></svg>"); + font-family: Ahem; + font-size: 100px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div>AZ</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-centered-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-image-centered-ref.html new file mode 100644 index 0000000000..f52cd963ad --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-centered-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Centered Background Gradient</title> +<style> + #a { + width: 200px; + height: 150px; + border-style: solid; + border-width: 10px; + background-position: 0px 0px; + background-image: repeating-radial-gradient(blue, green 20px); + } +</style> +<body> + <div id="a"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-centered-with-border-radius.html b/testing/web-platform/tests/css/css-backgrounds/background-image-centered-with-border-radius.html new file mode 100644 index 0000000000..925903b9e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-centered-with-border-radius.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: Centered background image with border radius</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-position"> + <link rel="match" href="reference/background-image-centered-with-border-radius-ref.html"> + <style> + span { + background: url(support/green-60x60-red-5px-border.png) no-repeat center; + border: 5px solid green; + border-radius: 5px; + box-sizing: border-box; + display: inline-block; + height: 60px; + width: 60px; + } + </style> +</head> + +<body> + <span></span> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-centered.html b/testing/web-platform/tests/css/css-backgrounds/background-image-centered.html new file mode 100644 index 0000000000..4d5633f1bf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-centered.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Centered Background Gradient</title> +<link rel="match" href="background-image-centered-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-position"> +<style> + #a { + width: 200px; + height: 150px; + border-style: solid; + border-width: 10px; + background-position: center center; + background-image: repeating-radial-gradient(blue, green 20px); + } +</style> +<body> + <div id="a"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-cors-no-reload.html b/testing/web-platform/tests/css/css-backgrounds/background-image-cors-no-reload.html new file mode 100644 index 0000000000..964ca0919c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-cors-no-reload.html @@ -0,0 +1,50 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1832528"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +:root { + --icon: url("/images/green.png?variable-cors-no-reload"); +} +.item::before, +.item::after { + display: block; + content: ""; + height: 1.25rem; + width: 1.25rem; + transform: rotate(180deg); + background: var(--icon) 50%/2rem 2rem; +} +.item::after { + background: blue; + mask: var(--icon); +} +.item.toggled::after, +.item.toggled::before { + color: blue; +} +</style> +<div class="item"></div> +<script> +let t = async_test("CORS image from variable doesn't cause re-downloads"); + +function getEntries() { + let url = new URL("/images/green.png?variable-cors-no-reload", location.href).href; + return performance.getEntriesByName(url); +} + +onload = t.step_func(function() { + let entries = getEntries(); + assert_equals(entries.length, 2, "should be loaded (twice, once with anon cors mode once without)"); + document.querySelector(".item").classList.toggle("toggled"); + // Assume that at least some of the time the load would complete under a second. + t.step_timeout(t.step_func_done(function() { + let entries_after = getEntries(); + assert_equals(entries_after.length, entries.length, "Shouldn't have caused re-downloads"); + }), 1000); +}); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-cover-zoomed-1.html b/testing/web-platform/tests/css/css-backgrounds/background-image-cover-zoomed-1.html new file mode 100644 index 0000000000..b4dca32fdd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-cover-zoomed-1.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: background-size:cover should cover at zoom</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-size"> + <link rel="match" href="reference/background-image-cover-zoomed-1-ref.html"> + <style> + body { + zoom: 80%; + } + body > div { + background: #f00; + width: 504px; + height: 252px; + } + + div > 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> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-first-letter.html b/testing/web-platform/tests/css/css-backgrounds/background-image-first-letter.html new file mode 100644 index 0000000000..87160959a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-first-letter.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Test: background-image applicability to ::first-letter</title> + <link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#placement"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties"> + <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"> + <link rel="match" href="reference/background-image-first-letter-ref.html"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <meta name="flags" content="ahem image"> + <meta name="assert" content="background-image applicability to ::first-letter"> + <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::first-letter { + 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">X</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-first-line.html b/testing/web-platform/tests/css/css-backgrounds/background-image-first-line.html new file mode 100644 index 0000000000..eb8cbbd0be --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-first-line.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Test: background-image applicability to ::first-line</title> +<link rel="help" href="http://www.w3.org/TR/css3-background/#placement"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image"> +<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties"> +<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo"> +<link rel="match" href="reference/background-image-first-line-ref.html"> +<meta name="flags" content="ahem image"> +<meta name="assert" content="background-image applicability to ::first-line"> +<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; +} +#content::first-line { + 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> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-conic-repaint-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-conic-repaint-ref.html new file mode 100644 index 0000000000..32158493df --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-conic-repaint-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<div style="color: green"> + <div style="width: 100px; height: 100px; background: conic-gradient(white, green)">This text should be green</div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-conic-repaint.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-conic-repaint.html new file mode 100644 index 0000000000..cbd524615f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-conic-repaint.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: Repaint gradient on currentColor change</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<link rel="match" href="background-image-gradient-currentcolor-conic-repaint-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-images-3/#color-stop-syntax"> +<style> + #outer { + color: red; + } + #inner { + width: 100px; + height: 100px; + background: conic-gradient(white, currentColor); + } +</style> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<div id="outer"> + <div id="inner">This text should be green</div> +</div> +<script> + requestAnimationFrame(function(){ + requestAnimationFrame(function(){ + outer.style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-linear-repaint-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-linear-repaint-ref.html new file mode 100644 index 0000000000..9a534e3b46 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-linear-repaint-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<div style="color: green"> + <div style="width: 100px; height: 100px; background: linear-gradient(white, green)">This text should be green</div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-linear-repaint.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-linear-repaint.html new file mode 100644 index 0000000000..1ad63ccef6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-linear-repaint.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: Repaint gradient on currentColor change</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<link rel="match" href="background-image-gradient-currentcolor-linear-repaint-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-images-3/#color-stop-syntax"> +<style> + #outer { + color: red; + } + #inner { + width: 100px; + height: 100px; + background: linear-gradient(white, currentColor); + } +</style> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<div id="outer"> + <div id="inner">This text should be green</div> +</div> +<script> + requestAnimationFrame(function(){ + requestAnimationFrame(function(){ + outer.style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-radial-repaint-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-radial-repaint-ref.html new file mode 100644 index 0000000000..45ff24dfee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-radial-repaint-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<div style="color: green"> + <div style="width: 100px; height: 100px; background: radial-gradient(white, green)">This text should be green</div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-radial-repaint.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-radial-repaint.html new file mode 100644 index 0000000000..3182f343cf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-radial-repaint.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: Repaint gradient on currentColor change</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<link rel="match" href="background-image-gradient-currentcolor-radial-repaint-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-images-3/#color-stop-syntax"> +<style> + #outer { + color: red; + } + #inner { + width: 100px; + height: 100px; + background: radial-gradient(white, currentColor); + } +</style> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<div id="outer"> + <div id="inner">This text should be green</div> +</div> +<script> + requestAnimationFrame(function(){ + requestAnimationFrame(function(){ + outer.style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-visited-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-visited-ref.html new file mode 100644 index 0000000000..43e0d1c065 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-visited-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<a style="color: green; width: 100px; height: 100px; display: block; background: linear-gradient(white, green);" href=""> + This text should be green +</a> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-visited.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-visited.html new file mode 100644 index 0000000000..65467b5eba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-currentcolor-visited.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: Repaint gradient on currentColor change (visited)</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<link rel="match" href="background-image-gradient-currentcolor-visited-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-images-3/#color-stop-syntax"> +<style> + a { + color: red; + width: 100px; + height: 100px; + display: block; + background: linear-gradient(white, currentColor); + } + a:visited { + color: blue; + } + a.green:visited { + color: green; + } +</style> +<p>There should be a square with a white-to-green gradient and some text below.</p> +<a id="target" href=""> + This text should be green +</a> +<script> + requestAnimationFrame(function(){ + requestAnimationFrame(function(){ + target.classList.add("green"); + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-interpolation-repaint-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-interpolation-repaint-ref.html new file mode 100644 index 0000000000..a69159609b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-interpolation-repaint-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<div style="width: 100px; height: 100px; background-image: linear-gradient(in oklch, yellow, blue)"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-interpolation-repaint.html b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-interpolation-repaint.html new file mode 100644 index 0000000000..8f5d0f14bb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-gradient-interpolation-repaint.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: Repaint gradient on color-interpolation-method change</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#color-interpolation-method"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#linear-gradients"> +<link rel="match" href="background-image-gradient-interpolation-repaint-ref.html"> +<div id="square" style="background-image: linear-gradient(in srgb, yellow, blue); width: 100px; height: 100px"></div> +<script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + square.style.backgroundImage = "linear-gradient(in oklch, yellow, blue)"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-large-with-auto.html b/testing/web-platform/tests/css/css-backgrounds/background-image-large-with-auto.html new file mode 100644 index 0000000000..a5e487b3e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-large-with-auto.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: Large images with one auto size are correctly sized</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-image"> + <link rel="match" href="reference/background-image-large-with-auto-ref.html"> + <style> + .wide-div { + background-image: url(support/green-1000x10.png); + background-repeat: no-repeat; + background-size: 10000px auto; + width: 1000px; + height: 100px; + border: 1px solid black; + } + + .high-div { + background-image: url(support/green-10x1000.png); + background-repeat: no-repeat; + background-size: auto 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/background-image-none-gradient-repaint.html b/testing/web-platform/tests/css/css-backgrounds/background-image-none-gradient-repaint.html new file mode 100644 index 0000000000..1ddca5e21d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-none-gradient-repaint.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: Repaint gradient change in second layer</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="background-clip-color-repaint-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#layering"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-9693" /> +<style> + #box { + width: 150px; + height: 150px; + } + .red { + background: none, linear-gradient(to right, red, red); + } + .green { + background: none, linear-gradient(to right, green, green); + } +</style> +<p>There should be a green square below.</p> +<div id="box" class="red"></div> +<script> + requestAnimationFrame(function(){ + requestAnimationFrame(function(){ + box.className = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-shared-stylesheet-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-image-shared-stylesheet-ref.html new file mode 100644 index 0000000000..31d508751a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-shared-stylesheet-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + :root { background-color: lime } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-shared-stylesheet.html b/testing/web-platform/tests/css/css-backgrounds/background-image-shared-stylesheet.html new file mode 100644 index 0000000000..c0c0661291 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-shared-stylesheet.html @@ -0,0 +1,49 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: Canceled load in another page doesn't affect new stylesheet</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800979"> +<link rel="match" href="background-image-shared-stylesheet-ref.html"> +<iframe></iframe> +<script> +const IMAGE_URI = new URL("/images/green.png", location.href).href + "?pipe=trickle(d2)&" + Math.random(); +const SHEET_URI = "data:text/css," + encodeURI(`:root{background-image: url('${IMAGE_URI}');}`); +const iframe = document.querySelector("iframe"); + +function willNavigate() { + // The child page has already loaded the stylesheet (guaranteed by the <script> rules) + // and is about to navigate away. Trigger our stylesheet load and thus image + // load when it does. The background-image should still apply to us. + iframe.addEventListener("load", function() { + let link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = SHEET_URI; + link.onload = function() { + iframe.remove(); + // We need to also make sure that the image has actually finished to load, + // so that the reftest screenshot can be taken. + const image = new Image(); + image.onload = function() { + document.documentElement.className = ""; + }; + image.src = IMAGE_URI; + }; + document.head.appendChild(link); + }, { once: true }); +} + +onload = function() { + document.querySelector("iframe").srcdoc = ` + <!doctype html> + <link rel="stylesheet" href="${SHEET_URI}"> + <script> + document.documentElement.getBoundingClientRect(); // Should trigger the image load. + parent.willNavigate(); + window.location = "/css/reference/blank.html"; + </` + `script> + `; +}; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-table-cells-straddling-no-repeat.html b/testing/web-platform/tests/css/css-backgrounds/background-image-table-cells-straddling-no-repeat.html new file mode 100644 index 0000000000..67f7937a3f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-table-cells-straddling-no-repeat.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>'no-repeat' background on table row straddling table cells</title> +<link rel="help" href="https://www.w3.org/TR/CSS21/tables.html#table-layers"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#drawing-cell-backgrounds"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +.green { + background-image: linear-gradient(green, green); + background-position: 100px 0px; + background-repeat: no-repeat; + background-size: 100px 100px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<table style="border-spacing: 0; margin-left: -100px"> + <tr class="green"> + <td style="padding: 0; height: 100px; width: 150px"></td> + <td style="padding: 0; height: 100px; width: 50px"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-image-table-cells-zoomed.html b/testing/web-platform/tests/css/css-backgrounds/background-image-table-cells-zoomed.html new file mode 100644 index 0000000000..fc23dec322 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-table-cells-zoomed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: A background image on table cells with collapsed borders should fill the table</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-image"> + <link rel="match" href="reference/background-image-table-cells-zoomed-ref.html"> + <style> + body { + zoom: 121%; + } + .test-table { + display: table; + width: 600px; + border-collapse: collapse; + border-spacing: 0; + background-color: red; + } + .test-row { + padding: 0px; + border: 0px; + display: table-row; + } + .test-cell { + display: table-cell; + padding: 0px; + height: 50px; + border: 0px; + background: url("support/50x50-green.png"); + background-size: 100% 100%; + } + + </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/background-image-with-border-radius-fidelity.html b/testing/web-platform/tests/css/css-backgrounds/background-image-with-border-radius-fidelity.html new file mode 100644 index 0000000000..b0b494f502 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-image-with-border-radius-fidelity.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Consistent image fidelity of background-image with border-radius</title> +<link rel="help" href="https://crbug.com/1069434"> +<link rel="match" href="reference/background-image-with-border-radius-fidelity-ref.html"> +<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"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-iframe-root-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-iframe-root-ref.html new file mode 100644 index 0000000000..e7f00b00e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-iframe-root-ref.html @@ -0,0 +1,16 @@ +<!doctype HTML> +<iframe srcdoc=" +<!doctype HTML> +<style> + div { + background: linear-gradient(lightblue, yellow); + background-size: 300px 300px; + background-position: 50px 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +</style> +<div></div>"></iframe> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-iframe-root.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-iframe-root.html new file mode 100644 index 0000000000..9c0cc829ff --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-iframe-root.html @@ -0,0 +1,16 @@ +<!doctype HTML> +<title>Backgrounds on the root element of an iframe should extend to cover the entire canvas of the iframe in the presence of margin</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#root-background"> +<link rel="match" href="background-margin-iframe-root-ref.html"> +<meta name=fuzzy content="0-1;0-750"> +<iframe srcdoc=" +<!doctype HTML> +<style> + html { + background: linear-gradient(lightblue, yellow); + height: 300px; + margin: 50px; + overflow: hidden; + } +</style>"></iframe> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-root-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-root-ref.html new file mode 100644 index 0000000000..2e5ec36ec0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-root-ref.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<style> + div { + background: linear-gradient(lightblue, yellow); + background-size: 300px 300px; + background-position: 50px 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-root.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-root.html new file mode 100644 index 0000000000..01fba7eb6a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-root.html @@ -0,0 +1,13 @@ +<!doctype HTML> +<title>Backgrounds on the root element should extend to cover the entire canvas in the presence of margin</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#root-background"> +<link rel="match" href="background-margin-root-ref.html"> +<meta name=fuzzy content="0-1;0-19000"> +<style> + html { + background: linear-gradient(lightblue, yellow); + height: 300px; + margin: 50px; + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-transformed-root-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-transformed-root-ref.html new file mode 100644 index 0000000000..2e5ec36ec0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-transformed-root-ref.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<style> + div { + background: linear-gradient(lightblue, yellow); + background-size: 300px 300px; + background-position: 50px 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-transformed-root.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-transformed-root.html new file mode 100644 index 0000000000..4c0e1085c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-transformed-root.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<title>Backgrounds on the root element should extend to cover the entire canvas in the presence of margin and transform</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#root-background"> +<link rel="match" href="background-margin-transformed-root-ref.html"> +<meta name=fuzzy content="0-1;0-19000"> +<style> + html { + background: linear-gradient(lightblue, yellow); + height: 300px; + margin: 50px; + transform: rotateZ(0deg); + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-will-change-root-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-will-change-root-ref.html new file mode 100644 index 0000000000..2e5ec36ec0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-will-change-root-ref.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<style> + div { + background: linear-gradient(lightblue, yellow); + background-size: 300px 300px; + background-position: 50px 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-margin-will-change-root.html b/testing/web-platform/tests/css/css-backgrounds/background-margin-will-change-root.html new file mode 100644 index 0000000000..ce34c99d77 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-margin-will-change-root.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<title>Backgrounds on the root element should extend to cover the entire canvas in the presence of margin and will-change: transform</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#root-background"> +<link rel="match" href="background-margin-will-change-root-ref.html"> +<meta name=fuzzy content="0-1;0-19000"> +<style> + html { + background: linear-gradient(lightblue, yellow); + height: 300px; + margin: 50px; + will-change: transform; + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-none-none-and-color-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-none-none-and-color-ref.html new file mode 100644 index 0000000000..2bdf06a685 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-none-none-and-color-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; + border: 2px solid black; +} +</style> +<div style="background-color: blue"></div> +<div></div> +<div style="background-color: blue; overflow: scroll"></div> + <div style="height: 200px"></div> +</div> +<div style="overflow: scroll"></div> + <div style="height: 200px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-none-none-and-color.html b/testing/web-platform/tests/css/css-backgrounds/background-none-none-and-color.html new file mode 100644 index 0000000000..49276cd29c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-none-none-and-color.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-color"> +<link rel="match" href="background-none-none-and-color-ref.html"> +<style> +div { + width: 100px; + height: 100px; + border: 2px solid black; +} +</style> +<div style="background: none, none; background-color: blue"></div> +<div style="background-color: blue; background: none, none"></div> +<div style="background: none, none; background-color: blue; overflow: scroll"></div> + <div style="height: 200px"></div> +</div> +<div style="background-color: blue; background: none, none; overflow: scroll"></div> + <div style="height: 200px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-001.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-001.html new file mode 100644 index 0000000000..a951bdd370 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background-origin - initial and supported values</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" /> + <meta name="flags" content="dom" /> + <meta name="assert" content="Check if background-origin initial value is padding-box and supports values border-box, padding-box and content-box" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"), + "padding-box", "background-origin initial value"); + }, "background-origin_initial"); + + document.getElementById("test").style.backgroundOrigin = "border-box"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"), + "border-box", "background-origin supporting value"); + }, "background-origin_border-box"); + + document.getElementById("test").style.backgroundOrigin = "padding-box"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"), + "padding-box", "background-origin supporting value"); + }, "background-origin_padding-box"); + + document.getElementById("test").style.backgroundOrigin = "content-box"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"), + "content-box", "background-origin supporting value"); + }, "background-origin_content-box"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-002.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-002.html new file mode 100644 index 0000000000..e86311f799 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-origin - initial value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property"> + <link rel="match" href="reference/background-origin-002-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Background-origin with initial value implies to position the background relative to the padding box."> + <style> + div { + position: absolute; + } + #ref-overlapped-red { + background-color: red; + height: 60px; + left: 5px; + top: 5px; + width: 60px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-repeat: no-repeat; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-003.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-003.html new file mode 100644 index 0000000000..4c2cbdd12c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-origin - padding-box keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property"> + <link rel="match" href="reference/background-origin-002-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Background-origin with 'padding-box' implies to position the background relative to the padding box."> + <style> + div { + position: absolute; + } + #ref-overlapped-red { + background-color: red; + height: 60px; + left: 5px; + top: 5px; + width: 60px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-origin: padding-box; + background-repeat: no-repeat; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-004.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-004.html new file mode 100644 index 0000000000..d94c0ffbc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-004.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-origin - border-box keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property"> + <link rel="match" href="reference/background-origin-004-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Background-origin with 'border-box' implies to position the background relative to the border box."> + <style> + div { + position: absolute; + } + #ref-overlapped-red { + background-color: red; + height: 60px; + width: 60px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-origin: border-box; + background-repeat: no-repeat; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-005.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-005.html new file mode 100644 index 0000000000..4521554c03 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-origin - content-box keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property"> + <link rel="match" href="reference/background-origin-005-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Background-origin with 'content-box' implies to position the background relative to the content box."> + <style> + div { + position: absolute; + } + #ref-overlapped-red { + background-color: red; + height: 60px; + left: 30px; + top: 30px; + width: 60px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-origin: content-box; + background-repeat: no-repeat; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-006.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-006.html new file mode 100644 index 0000000000..9dfa4f99c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-006.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-origin 'content-box' with background-attachment 'fixed'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property"> + <link rel="match" href="reference/background-origin-006-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if the 'background-attachment' value is 'fixed' that expecting 'background-origin' has no effect and the background positioning area is the initial containing block."> + <style> + html { + padding-left: 170px; + } + div { + left: 0px; + position: absolute; + top: 0px; + } + #ref-overlapped-red { + background-color: red; + height: 60px; + width: 60px; + } + #test-overlapping-green { + background-attachment: fixed; + background-image: url(support/60x60-green.png); + background-origin: content-box; + background-repeat: no-repeat; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the left of the page and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"> + <div id="test-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-007.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-007.html new file mode 100644 index 0000000000..8652495f57 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-007.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-origin 'border-box' with background-clip 'padding-box'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property"> + <link rel="match" href="reference/background-origin-007-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-clip' is 'padding-box', 'background-origin' is 'border-box', 'background-position' is 'top left' (the initial value), and the element has a non-zero border, that expecting the top and left of the background image will be clipped."> + <style> + div { + position: absolute; + } + #ref-overlapping-green { + background-color: green; + height: 55px; + left: 5px; + top: 5px; + width: 55px; + } + #test-overlapped-red { + background-clip: padding-box; + background-image: url(/css/support/60x60-red.png); + background-origin: border-box; + background-position: top left; + background-repeat: no-repeat; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test-overlapped-red"></div> + <div id="ref-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin-008.html b/testing/web-platform/tests/css/css-backgrounds/background-origin-008.html new file mode 100644 index 0000000000..a4d7e993e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin-008.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-origin - inherit keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property"> + <link rel="match" href="reference/background-origin-005-ref.html"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#value-types" title="2.2. Value Types"> + <!-- + " + all properties defined in this specification also accept + the inherit keyword as their property value + " + CSS Backgrounds and Borders Module Level 3 + 2.2. Value Types + http://www.w3.org/TR/css3-background/#value-types + --> + + <meta name="assert" content="Background-origin with 'inherit' implies to inherit its parent element value to position the background area."> + <style> + div { + position: absolute; + } + #container { + background-origin: content-box; + } + #ref { + background-color: red; + height: 60px; + left: 30px; + top: 30px; + width: 60px; + } + #test { + background-image: url(support/60x60-green.png); + background-origin: inherit; + background-repeat: no-repeat; + border: transparent dotted 5px; + height: 100px; + padding: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref"></div> + <div id="test"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt b/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt new file mode 100644 index 0000000000..a6fdedde54 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt @@ -0,0 +1,12 @@ +background-origin/border-box.html +background-origin/border-box_with_position.html +background-origin/border-box_with_radius.html +background-origin/border-box_with_size.html +background-origin/content-box.html +background-origin/content-box_with_position.html +background-origin/content-box_with_radius.html +background-origin/content-box_with_size.html +background-origin/padding-box.html +background-origin/padding-box_with_position.html +background-origin/padding-box_with_radius.html +background-origin/padding-box_with_size.html diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box.html new file mode 100644 index 0000000000..bf1607287a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box.html @@ -0,0 +1,44 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Backgrounds Test: background-origin:border-box</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-border-box-ref.html"> + + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : border-box; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_position.html new file mode 100644 index 0000000000..a2695d4fb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_position.html @@ -0,0 +1,44 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:border-box & background-position</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-border-box_with_position-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : border-box; + background-position: -15px -15px; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_radius.html new file mode 100644 index 0000000000..4b123cf664 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_radius.html @@ -0,0 +1,46 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:border-box & border-radius</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-border-box_with_radius-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : border-box; + border-radius: 60px; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_size.html new file mode 100644 index 0000000000..7de6afbfb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_size.html @@ -0,0 +1,46 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:border-box & background-size</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-border-box_with_size-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : border-box; + background-size : 50%; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box.html new file mode 100644 index 0000000000..b8bb74405b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box.html @@ -0,0 +1,45 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:content-box</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-content-box-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : content-box; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_position.html new file mode 100644 index 0000000000..5637df9886 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_position.html @@ -0,0 +1,40 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:content-box & background-position</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-content-box_with_position-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : content-box; + background-position: -15px -15px; + } + + .no-repeat { + background-repeat : no-repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_radius.html new file mode 100644 index 0000000000..5be4fc6b3e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_radius.html @@ -0,0 +1,46 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:content-box & border-radius</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-content-box_with_radius-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : content-box; + border-radius: 60px; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_size.html new file mode 100644 index 0000000000..e0c26d5fe1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_size.html @@ -0,0 +1,46 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:content-box & background-size</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-content-box_with_size-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : content-box; + background-size : 50%; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box.html new file mode 100644 index 0000000000..0e1cbe00f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box.html @@ -0,0 +1,44 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Backgrounds Test: background-origin:padding-box</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-padding-box-ref.html"> + + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : padding-box; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_position.html new file mode 100644 index 0000000000..c7a2310b03 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_position.html @@ -0,0 +1,40 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:padding-box & background-position</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-padding-box_with_position-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : padding-box; + background-position: -15px -15px; + } + + .no-repeat { + background-repeat : no-repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_radius.html new file mode 100644 index 0000000000..d0010a6604 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_radius.html @@ -0,0 +1,46 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:padding-box & border-radius</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-padding-box_with_radius-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : padding-box; + border-radius: 60px; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_size.html new file mode 100644 index 0000000000..7179826661 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_size.html @@ -0,0 +1,46 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin:padding-box & background-size</title> + <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" > + <meta name="flags" content=""> + <link rel="match" href="../reference/origin-padding-box_with_size-ref.html"> + + <meta charset="utf-8"> + + +<style type="text/css"> + + div { + border : 16px solid rgba(60,150,255,0.4); + width : 450px; + height : 224px; + padding : 16px; + margin-top : 8px; + background-image : url("support/yellow-orange-blue-160x160.png"); + background-origin : padding-box; + background-size : 50%; + } + + .no-repeat { + background-repeat : no-repeat; + } + + .repeat { + background-repeat : repeat; + } + +</style> + +</head> +<body> + + <div class="no-repeat"></div> + + <div class="repeat"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/support/yellow-orange-blue-160x160.png b/testing/web-platform/tests/css/css-backgrounds/background-origin/support/yellow-orange-blue-160x160.png Binary files differnew file mode 100644 index 0000000000..1372399ddf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/support/yellow-orange-blue-160x160.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-paint-order-001.html b/testing/web-platform/tests/css/css-backgrounds/background-paint-order-001.html new file mode 100644 index 0000000000..cf567ff96b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-paint-order-001.html @@ -0,0 +1,23 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip"> + <meta name="assert" content="The background is painted behind the border."> + <link rel="match" href="reference/background-paint-order-001-ref.html"> + <style> + div + { + width: 0; + border: 50px solid green; + background-color: red; + } + </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/background-position-calc-minmax-001.html b/testing/web-platform/tests/css/css-backgrounds/background-position-calc-minmax-001.html new file mode 100644 index 0000000000..4e71f55623 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position-calc-minmax-001.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: background-position with min and max percentages</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> + <link rel="help" href="https://www.w3.org/TR/css-values-4/#comp-func"> + + <!-- + + Issue 4227: [css-values-4] min/max(%, %) should explicitly evaluate + against the % value, not the resolved value + https://github.com/w3c/csswg-drafts/issues/4227 + + Bug 1689244: Don't eagerly resolve min() expressions that have a + percent value (at least not if the percent value could be resolved + against a negative percent basis) + https://bugzilla.mozilla.org/show_bug.cgi?id=1689244 + + --> + + <link rel="match" href="reference/ref-filled-green-100px-square.xht"> + + <meta content="" name="flags"> + <meta content="This test checks that when the background positioning area is smaller than the width of background image, then the 'background-position' percentage value will resolve as a negative offset." name="assert"> + + <style> + div + { + height: 25px; + width: 100px; + } + + div#first-sub-test + { + background-image: url("support/pattern-rg-rr-200x200.png"); + background-position: min(0%, 100%) max(0%, 100%); + + /* + + the first value represents the horizontal position (or offset) and (...) + the second value represents the vertical position (or offset). The + <length-percentage> values represent an offset of the top left + corner of the background image from the top left corner of the + background positioning area. + + A percentage for the horizontal offset is relative to + (width of background positioning area - width of background image). + A percentage for the vertical offset is relative to + (height of background positioning area - height of background image), + where the size of the image is the size given by background-size. + + */ + } + + div#second-sub-test + { + background-image: url("support/pattern-rr-rg-200x200.png"); + background-position: min(0%, 100%) min(0%, 100%); + } + + div#third-sub-test + { + background-image: url("support/pattern-rr-gr-200x200.png"); + background-position: max(0%, 100%) min(0%, 100%); + } + + div#fourth-sub-test + { + background-image: url("support/pattern-gr-rr-200x200.png"); + background-position: max(0%, 100%) max(0%, 100%); + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="first-sub-test"></div> + + <div id="second-sub-test"></div> + + <div id="third-sub-test"></div> + + <div id="fourth-sub-test"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position-negative-percentage-comparison-002.html b/testing/web-platform/tests/css/css-backgrounds/background-position-negative-percentage-comparison-002.html new file mode 100644 index 0000000000..b349617c58 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position-negative-percentage-comparison-002.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874606#c3"> +<link rel="match" href="reference/background-position-negative-percentage-comparison-ref.html"> +<style> +.target { + margin: 50px; + width: 50px; + height: 50px; + border: 1px solid black; + background-image: url("support/100x100-blue-and-orange.png"); + background-position: min(0%, 100%) max(0%, 100%); + /* Should behave the same as the declaration above: */ + background-position-x: min(0%, 100%); + background-position-y: max(0%, 100%); +} +</style> +<div class="target"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position-negative-percentage-comparison.html b/testing/web-platform/tests/css/css-backgrounds/background-position-negative-percentage-comparison.html new file mode 100644 index 0000000000..389ee71919 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position-negative-percentage-comparison.html @@ -0,0 +1,16 @@ +<!doctype html> +<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func"> +<link rel="match" href="reference/background-position-negative-percentage-comparison-ref.html"> +<style> +.target { + margin: 50px; + width: 50px; + height: 50px; + border: 1px solid black; + background-image: url("support/100x100-blue-and-orange.png"); + background-position: min(0%, 100%) max(0%, 100%); +} +</style> +<div class="target"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position-subpixel-at-border.tentative.html b/testing/web-platform/tests/css/css-backgrounds/background-position-subpixel-at-border.tentative.html new file mode 100644 index 0000000000..ad2fa4dc02 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position-subpixel-at-border.tentative.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds: Subpixel positions adjacent to the borders</title> + <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> + <link rel="match" href="reference/background-position-subpixel-at-border-ref.tentative.html"> + <style> + #no-repeat-y-bottom { + position: absolute; + top: 200.5px; + left: 8px; + width: 150px; + height: 37.5px; + border-width: 0px 0px 1.25px; + 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 -1.25px left 0px; + background-repeat: repeat-x; + padding: 2.5px 2.5px 1.25px 2.5px; + } + #no-repeat-y-top { + position: absolute; + top: 160.25px; + left: 8px; + width: 150px; + height: 37.5px; + border-width: 1.25px 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 -1.25px left 0px; + background-repeat: repeat-x; + padding: 1.25px 2.5px 2.5px 2.5px; + } + #no-repeat-x-right { + position: absolute; + top: 8px; + left: 200.5px; + width: 37.5px; + height: 150px; + border-width: 0px 1.25px 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 -1.25px top 0px; + background-repeat: repeat-y; + padding: 2.5px 1.25px 2.5px 2.5px; + } + #no-repeat-x-left { + position: absolute; + top: 8px; + left: 160.25px; + width: 37.5px; + height: 150px; + border-width: 0px 0px 0px 1.25px; + 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 -1.25px top 0px; + background-repeat: repeat-y; + padding: 2.5px 2.5px 2.5px 1.25px; + } + </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/background-position-three-four-values.html b/testing/web-platform/tests/css/css-backgrounds/background-position-three-four-values.html new file mode 100644 index 0000000000..b3a1314486 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position-three-four-values.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + +<title>CSS Test: 'Background-position' with three and four values</title> +<link rel="help" href="http://www.w3.org/TR/css3-background/#background-position" /> +<meta name="assert" content="If three or four values are given to 'background-position', then each percentage or length value represents an offset from the edge specified by the preceeding keyword." /> +<link rel="match" href="reference/background-position-three-four-values-ref.html"> +<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: left 50px center; +} +.test2 { + background-position: right 25px top 75%; +} +.test3 { + background-position: left 25px bottom 75%; +} +.test4 { + background-position: right 25px bottom 25%; +} +</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/background-position-xy-three-four-values-passthru.html b/testing/web-platform/tests/css/css-backgrounds/background-position-xy-three-four-values-passthru.html new file mode 100644 index 0000000000..e504ecca7d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position-xy-three-four-values-passthru.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + +<title>CSS Test: 'Background-position' with three and four values</title> +<link rel="help" href="http://www.w3.org/TR/css3-background/#background-position" /> +<meta name="assert" content="background-position-x/y will round-trip serialized values even if the new three/four value syntax is used for background-position." /> +<link rel="match" href="reference/background-position-three-four-values-ref.html"> +<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: left 50px center; +} +#test2 { + background-position: right 25px top 75%; +} +#test3 { + background-position: left 25px bottom 75%; +} +#test4 { + background-position: right 25px bottom 25%; +} +</style> + +</head> +<body> + +<div id="test1"></div> +<div id="test2"></div> +<div id="test3"></div> +<div id="test4"></div> + +<script> +for (let id of ['test1','test2','test3','test4']) { + let d = document.getElementById(id); + let x = getComputedStyle(d).backgroundPositionX; + let y = getComputedStyle(d).backgroundPositionY; + d.style.backgroundPositionX = x; + d.style.backgroundPositionY = y; +} +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position/background-position-bottom-right-repeat-round.html b/testing/web-platform/tests/css/css-backgrounds/background-position/background-position-bottom-right-repeat-round.html new file mode 100644 index 0000000000..c6d93e148c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position/background-position-bottom-right-repeat-round.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>background-position with 'bottom' and 'right' edge keywords with background-repeat 'round'</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat"> +<link rel="match" href="reference/background-position-bottom-right-repeat-round-ref.html"> +<style> + #target { + width: 100px; + height: 100px; + background-image: linear-gradient(45deg, lime, green); + background-repeat: round; + background-size: 51px 51px; + background-position: right 25% bottom 25%; + } +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position/background-position-right-in-body.html b/testing/web-platform/tests/css/css-backgrounds/background-position/background-position-right-in-body.html new file mode 100644 index 0000000000..4c4024e2e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position/background-position-right-in-body.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>background-position with 'right' edge keywords when painting background for body in offset document root</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<link rel="match" href="../../filter-effects/reference/green-100x100.html"> +<style> + html { + margin: 8px; + } + body { + background-image: linear-gradient(green, green), linear-gradient(red, red); + background-size: 100px 100px, 100px 100px; + background-position: right 100% top 0%, left 0% top 0%; + background-repeat: no-repeat; + } +</style> +<body></body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position/reference/background-position-bottom-right-repeat-round-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-position/reference/background-position-bottom-right-repeat-round-ref.html new file mode 100644 index 0000000000..ea2b784203 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position/reference/background-position-bottom-right-repeat-round-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>background-position with 'bottom' and 'right' edge keywords with background-repeat 'round' (reference)</title> +<style> + #target { + width: 100px; + height: 100px; + background-image: linear-gradient(45deg, lime, green); + background-repeat: round; + background-size: 51px 51px; + background-position: left 75% top 75%; + } +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position/reference/subpixel-position-center-ref.tentative.html b/testing/web-platform/tests/css/css-backgrounds/background-position/reference/subpixel-position-center-ref.tentative.html new file mode 100644 index 0000000000..be20fbbe77 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position/reference/subpixel-position-center-ref.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds: Subpixel position center is centered, reference</title> + <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> + <style> + .first{ + outline: 2px solid green; + position: absolute; + width: 87.5px; + height: 87.5px; + left: 43.75px; + top: 43.75px; + } + .second { + background-image: url("../../resources/green-100.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: 38.5px 35px; + position: absolute; + width: 140px; + height: 140px; + left: 17.5px; + top: 17.5px; + } + </style> +</head> +<body> +<div class="first"></div> +<div class="second"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position/subpixel-position-center.tentative.html b/testing/web-platform/tests/css/css-backgrounds/background-position/subpixel-position-center.tentative.html new file mode 100644 index 0000000000..b708e12312 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-position/subpixel-position-center.tentative.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds: Subpixel position center is centered</title> + <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> + <link rel="match" href="reference/subpixel-position-center-ref.tentative.html"> + <style> + .first{ + outline: 2px solid green; + background-image: url("../../css-images/support/swatch-red.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: 38.5px 35px; + position: absolute; + width: 87.5px; + height: 87.5px; + left: 43.75px; + top: 43.75px; + } + .second { + background-image: url("../resources/green-100.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: 38.5px 35px; + position: absolute; + width: 140px; + height: 140px; + left: 17.5px; + top: 17.5px; + } + </style> +</head> +<body> +<div class="first"></div> +<div class="second"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-001.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-001.html new file mode 100644 index 0000000000..d4ff39384d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-repeat - one round keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-repeat' is 'round', then the width and height of the corresponding background image is rescaled so that they fit a whole number of times (2 in this test) in the background positioning area. Therefore the used width and height of the background image in this test should be 110px."> + <style> + div { + background-color: red; + background-image: url(support/cat.png); /* 98px wide by 99px tall */ + background-repeat: round; /* round round */ + height: 220px; + width: 220px; + + /* + Background positioning area is 220px wide by 220px tall. + So, the height of the image is rounded to 110px, [220px / rounded (220px / 99px)] + and the width of the image is rounded to 110px, [220px / rounded (220px / 98px)]. + */ + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-002.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-002.html new file mode 100644 index 0000000000..2f52f27aaf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> + +<head> + +<title>CSS Backgrounds and Borders Test: background-repeat: round basic support</title> +<link rel="author" title="Lea Verou" href="http://lea.verou.me" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> +<meta name="flags" content="image" /> +<meta name="assert" content="The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does." /> +<style> + +html { + background: red url('support/swatch-green.png') no-repeat; + background-repeat: round; +} + +</style> + +</head> +<body> + +<p>Test passes if there is green and <strong>no red</strong>.</p> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1-ref.html new file mode 100644 index 0000000000..ecd58d762f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image repeat</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-size: 36px 36px; + background-repeat: repeat; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 36px 36px; + background-image: linear-gradient(to top left, red, green); + background-repeat: repeat; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1a.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1a.html new file mode 100644 index 0000000000..6717ce1b34 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1a.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not."> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: round; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: round; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1b.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1b.html new file mode 100644 index 0000000000..831666efd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'round round' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-12" /> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: round round; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: round round; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1c.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1c.html new file mode 100644 index 0000000000..3fcfd80b1c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1c.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not."> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 36px 36px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: repeat round; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 36px 36px; + background-image: linear-gradient(to top left, red, green); + background-repeat: repeat round; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1d.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1d.html new file mode 100644 index 0000000000..7b7d42606d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1d.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'round repeat' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-12" /> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 32px 36px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: round repeat; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 32px 36px; + background-image: linear-gradient(to top left, red, green); + background-repeat: round repeat; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1e.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1e.html new file mode 100644 index 0000000000..9fbf786bd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-1e.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-12" /> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 36px 32px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: repeat round; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 36px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: repeat round; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-2-ref.html new file mode 100644 index 0000000000..b530e61a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-2-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image repeat</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-size: 36px 36px; + background-repeat: repeat-x; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: linear-gradient(to top left, red, green); + background-size: 36px 36px; + background-repeat: repeat-x; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-2.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-2.html new file mode 100644 index 0000000000..a49224cc1b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-2.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round no-repeat</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-2-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'round no-repeat' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-9" /> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: round no-repeat; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 32px 36px; + background-image: linear-gradient(to top left, red, green); + background-repeat: round no-repeat; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-3-ref.html new file mode 100644 index 0000000000..e44cecd8f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-3-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image repeat</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-size: 36px 36px; + background-repeat: repeat-y; + } + #outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: linear-gradient(to top left, red, green); + background-size: 36px 36px; + background-repeat: repeat-y; + } + </style> + </head> + <body> + <div id="outer"><div id=inner></div></div> + <div id="outer_gradient"><div id=inner></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-3.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-3.html new file mode 100644 index 0000000000..e7d6f45272 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-3.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image no-repeat round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-3-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'no-repeat round' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-9" /> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-size: 36px auto; + background-repeat: no-repeat round; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: linear-gradient(to top left, red, green); + background-size: 36px 32px; + background-repeat: no-repeat round; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-4-ref.html new file mode 100644 index 0000000000..8139ace8da --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-4-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image repeat with specified position</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-size: 36px 36px; + background-repeat: repeat; + background-position: 5px 5px; + } + .outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: linear-gradient(to top left, red, green); + background-size: 36px 36px; + background-repeat: repeat; + background-position: 5px 5px; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-4.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-4.html new file mode 100644 index 0000000000..be1a4c8ae9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-round-4.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round with specified position</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-round-4-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not."> + <style type="text/css"> + #outer { + width: 72px; + height: 72px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: round; + background-position: 5px 5px; + } + #outer_gradient { + width: 72px; + height: 72px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: round; + background-position: 5px 5px; + } + </style> + </head> + <body> + <div id="outer"></div> + <div id="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1-ref.html new file mode 100644 index 0000000000..11ea2c7bc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 1px solid black; + width: 106px; + height: 106px; + display: flex; + justify-content: space-between; + align-content: space-between; + flex-wrap: wrap; + } + .inner + { + height: 32px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + } + .outer_gradient + { + border: 1px solid black; + width: 106px; + height: 106px; + display: flex; + justify-content: space-between; + align-content: space-between; + flex-wrap: wrap; + } + .inner_gradient + { + height: 32px; + width: 32px; + background-image: linear-gradient(to top left, red, green); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + </div> + <div class="outer_gradient"> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-10-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-10-ref.html new file mode 100644 index 0000000000..f4c2b7c18e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-10-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 1px solid black; + width: 96px; + height: 106px; + display: flex; + justify-content: space-between; + align-content: space-between; + flex-wrap: wrap; + } + .inner + { + height: 32px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-10.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-10.html new file mode 100644 index 0000000000..cb1c782116 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-10.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-10-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-990"> + <style type="text/css"> + .outer { + width: 96px; + height: 106px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1a.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1a.html new file mode 100644 index 0000000000..f2dfa9a0a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1a.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-7950"> + <style type="text/css"> + .outer { + width: 106px; + height: 106px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space; + } + .outer_gradient { + width: 106px; + height: 106px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: space; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1b.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1b.html new file mode 100644 index 0000000000..b1e6777bf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space with position</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-7950"> + <style type="text/css"> + .outer { + width: 106px; + height: 106px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-position: 15px 15px; + background-repeat: space; + } + .outer_gradient { + width: 106px; + height: 106px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-position: 15px 15px; + background-repeat: space; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1c.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1c.html new file mode 100644 index 0000000000..3f562042ae --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-1c.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-1-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space space' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-7950"> + <style type="text/css"> + .outer { + width: 106px; + height: 106px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space space; + } + .outer_gradient { + width: 106px; + height: 106px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: space space; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-2-ref.html new file mode 100644 index 0000000000..5dbd30d550 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-2-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 48px; + height: 48px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: no-repeat; + background-position: 5px 5px; + } + .outer_gradient { + width: 48px; + height: 48px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: no-repeat; + background-position: 5px 5px; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-2.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-2.html new file mode 100644 index 0000000000..ac9664482c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round with specified position</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-2-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not."> + <style type="text/css"> + .outer { + width: 48px; + height: 48px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space; + background-position: 5px 5px; + } + .outer_gradient { + width: 48px; + height: 48px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: space; + background-position: 5px 5px; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-3-ref.html new file mode 100644 index 0000000000..f132f2ecea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-3-ref.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer1 + { + border: 1px solid black; + width: 106px; + height: 106px; + display: flex; + justify-content: space-between; + } + .inner1 + { + height: 32px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + margin-top: 40px; + } + .outer2 + { + border: 1px solid black; + width: 106px; + height: 106px; + display: flex; + align-content: space-between; + flex-wrap: wrap; + } + .inner2 + { + height: 32px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + margin-left: 40px; + } + .inner_gradient1 + { + height: 32px; + width: 32px; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + margin-top: 40px; + } + .inner_gradient2 + { + height: 32px; + width: 32px; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + margin-left: 40px; + } + </style> + </head> + <body> + <div class="outer1"> + <div class="inner1"></div> + <div class="inner1"></div> + <div class="inner1"></div> + </div> + <div class="outer2"> + <div class="inner2"></div> + <div class="inner2"></div> + <div class="inner2"></div> + </div> + <div class="outer1"> + <div class="inner_gradient1"></div> + <div class="inner_gradient1"></div> + <div class="inner_gradient1"></div> + </div> + <div class="outer2"> + <div class="inner_gradient2"></div> + <div class="inner_gradient2"></div> + <div class="inner_gradient2"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-3.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-3.html new file mode 100644 index 0000000000..c55f918c17 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-3.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image round with specified position</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-3-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'no-repeat space' and 'space no-repeat' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-5300"> + <style type="text/css"> + .outer { + width: 106px; + height: 106px; + border: 1px solid black; + } + .inner1 { + width: 106px; + height: 106px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space no-repeat; + background-position: 7px 40px; + } + .inner2 { + width: 106px; + height: 106px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: no-repeat space; + background-position: 40px 7px; + } + .inner_gradient1 { + width: 106px; + height: 106px; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: space no-repeat; + background-position: 7px 40px; + } + .inner_gradient2 { + width: 106px; + height: 106px; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: no-repeat space; + background-position: 40px 7px; + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + </div> + <div class="outer"> + <div class="inner2"></div> + </div> + <div class="outer"> + <div class="inner_gradient1"></div> + </div> + <div class="outer"> + <div class="inner_gradient2"></div> + </div> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-4-ref.html new file mode 100644 index 0000000000..a375db50cd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-4-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 1px solid black; + width: 96px; + height: 106px; + display: flex; + align-content: space-between; + flex-wrap: wrap; + } + .inner + { + height: 32px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + } + .inner_gradient + { + height: 32px; + width: 32px; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + </div> + <div class="outer"> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-4.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-4.html new file mode 100644 index 0000000000..c3b35d6a6d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-4.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-4-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'repeat space' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-7908"> + <style type="text/css"> + .outer { + width: 96px; + height: 106px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: repeat space; + } + .outer_graident { + width: 96px; + height: 106px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: repeat space; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_graident"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-5-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-5-ref.html new file mode 100644 index 0000000000..d9d3ca1184 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-5-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 1px solid black; + width: 106px; + height: 96px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + .inner + { + height: 32px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + } + .inner_gradient + { + height: 32px; + width: 32px; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + </div> + <div class="outer"> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-5.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-5.html new file mode 100644 index 0000000000..5594efb315 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-5.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-5-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space repeat' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-7960"> + <style type="text/css"> + .outer { + width: 106px; + height: 96px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space repeat; + } + .outer_gradient { + width: 106px; + height: 96px; + border: 1px solid black; + background-size: 32px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: space repeat; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-6-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-6-ref.html new file mode 100644 index 0000000000..c07440184b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-6-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 1px solid black; + width: 192px; + height: 106px; + display: flex; + align-content: space-between; + flex-wrap: wrap; + } + .inner + { + height: 32px; + width: 64px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: no-repeat; + background-size: 64px 32px; + } + .inner_gradient + { + height: 32px; + width: 64px; + background-image: linear-gradient(to top left, red, green); + background-repeat: no-repeat; + background-size: 64px 32px; + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + </div> + <div class="outer"> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-6.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-6.html new file mode 100644 index 0000000000..8d372dd277 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-6.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-6-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'round space' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-15894"> + <style type="text/css"> + .outer { + width: 192px; + height: 106px; + border: 1px solid black; + background-size: 60px 32px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: round space; + } + .outer_gradient { + width: 192px; + height: 106px; + border: 1px solid black; + background-size: 60px 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: round space; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-7-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-7-ref.html new file mode 100644 index 0000000000..541fbd4ddc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-7-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 1px solid black; + width: 106px; + height: 192px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + .inner + { + height: 64px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: no-repeat; + background-size: 32px 64px; + } + .inner_gradient + { + height: 64px; + width: 32px; + background-image: linear-gradient(to top left, red, green); + background-repeat: no-repeat; + background-size: 32px 64px; + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + </div> + <div class="outer"> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + <div class="inner_gradient"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-7.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-7.html new file mode 100644 index 0000000000..d52f76fe5f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-7.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-7-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space round' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-15878"> + <style type="text/css"> + .outer { + width: 106px; + height: 192px; + border: 1px solid black; + background-size: 32px 60px; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space round; + } + .outer_gradient { + width: 106px; + height: 192px; + border: 1px solid black; + background-size: 32px 60px; + background-image: linear-gradient(to top left, red, green); + background-repeat: space round; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-8-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-8-ref.html new file mode 100644 index 0000000000..5846409171 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-8-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 20px solid rgba(0, 0, 0, 0.5); + width: 106px; + height: 106px; + background-image: url(support/aqua-yellow-37x37.png); + background-repeat: repeat; + } + .outer_gradient + { + border: 20px solid rgba(0, 0, 0, 0.5); + width: 32px; + height: 32px; + background-size: 50px 50px; + background-image: linear-gradient(to top left, red, green); + background-repeat: no-repeat; + background-position: -10px -10px; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-8.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-8.html new file mode 100644 index 0000000000..17beb1caf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-8.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-8-ref.html"> + <meta name="fuzzy" content="maxDifference=0-80; totalPixels=0-15880" /> + <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not."> + <style type="text/css"> + .outer { + width: 106px; + height: 106px; + border: 20px solid rgba(0, 0, 0, .5); + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space; + } + .outer_gradient { + width: 32px; + height: 32px; + border: 20px solid rgba(0, 0, 0, .5); + background-size: 50px 50px; + background-image: linear-gradient(to top left, red, green); + background-repeat: space; + background-position: -10px -10px; + } + </style> + </head> + <body> + <div class="outer"></div> + <div class="outer_gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-9-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-9-ref.html new file mode 100644 index 0000000000..6aa9c73215 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-9-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: position background image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer + { + border: 1px solid black; + width: 106px; + height: 96px; + display: flex; + justify-content: space-between; + align-content: space-between; + flex-wrap: wrap; + } + .inner + { + height: 32px; + width: 32px; + background-image: url(support/aqua-yellow-32x32.png); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + <div class="inner"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-9.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-9.html new file mode 100644 index 0000000000..79f4c0c0a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-9.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Background: background-repeat: background image space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="background-repeat-space-9-ref.html"> + <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-981"> + <style type="text/css"> + .outer { + width: 106px; + height: 96px; + border: 1px solid black; + background-image: url(support/aqua-yellow-32x32.png); + background-repeat: space; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-padding-box.htm b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-padding-box.htm new file mode 100644 index 0000000000..c375c22412 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat-space-padding-box.htm @@ -0,0 +1,37 @@ +<!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 Test: 'Background-repeat: space' when background positioning area is 'padding-box'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="assert" content="When 'background-repeat: space' and background positioning area is set to 'padding-box' the image is repeated as often within the 'padding-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'padding-box'." /> + <style type="text/css"> + #reference + { + width: 2.9in; + height: 2.9in; + padding: 25px; + border: 25px double black; + background-clip: padding-box; + background-image: url("../support/red_space_pb.png"); + } + #test + { + margin-top: -378px; + width: 2.9in; + height: 2.9in; + padding: 25px; + border: 25px double black; + background-origin: padding-box; + background-image: url("support/green_color.png"); + background-repeat: no-repeat; + background-repeat: space; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="reference"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-no-repeat.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-no-repeat.xht new file mode 100644 index 0000000000..d102e80cce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-no-repeat.xht @@ -0,0 +1,30 @@ +<!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 Test: background-repeat:no-repeat</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="match" href="reference/background-repeat-no-repeat.xht"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="flags" content="image" /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5" /> + <meta name="assert" content="The image is placed once in the background positioning area and not repeated in any direction." /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + background-image: url("support/rectangle-96x60.png"); + background-repeat: no-repeat; + height: 150px; + width: 240px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image appears once in the below rectangle. There should be a grey area to the right and bottom of the image.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-repeat-x.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-repeat-x.xht new file mode 100644 index 0000000000..2f3984a787 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-repeat-x.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 Test: background-repeat:repeat-x</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="match" href="reference/background-repeat-repeat-x.xht"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The image is repeated horizontally as often as needed to cover the background painting area." /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + background-image: url("support/rectangle-96x60.png"); + background-repeat: repeat-x; + height: 150px; + width: 240px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats horizontally in the below rectangle 2½ times exactly. There should be a grey area below the images, but not to their right.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-repeat-y.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-repeat-y.xht new file mode 100644 index 0000000000..b6ba5938a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-repeat-y.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 Test: background-repeat:repeat-y</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="match" href="reference/background-repeat-repeat-y.xht"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The image is repeated vertically as often as needed to cover the background painting area." /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + background-image: url("support/rectangle-96x60.png"); + background-repeat: repeat-y; + height: 150px; + width: 240px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats vertically in the below rectangle 2½ times exactly. There should be a grey area to the right of the images, but not below them.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-round-roundup.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-round-roundup.xht new file mode 100644 index 0000000000..14b0f175a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-round-roundup.xht @@ -0,0 +1,27 @@ +<!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 Test: background-repeat:round, rounding up</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="match" href="reference/background-repeat-round-roundup.xht"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area." /> + <style type="text/css"> + <![CDATA[ + div { + background-image: url("support/rectangle-96x60.png"); + background-repeat: round; + height: 212px; + width: 252px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats in the below rectangle 12 times exactly: 3 columns, 4 rows. The top border of the containing rectangle should be orange, the right border yellow, the bottom border green, and the left border blue.</p> + <p>Test fails if the above image repeats in below rectangle less than 12 times, with partial images lining the right and the bottom.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-round.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-round.xht new file mode 100644 index 0000000000..507a75c573 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-round.xht @@ -0,0 +1,27 @@ +<!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 Test: background-repeat:round</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="match" href="reference/background-repeat-round.xht"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area." /> + <style type="text/css"> + <![CDATA[ + div { + background-image: url("support/rectangle-96x60.png"); + background-repeat: round; + height: 204px; + width: 236px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats in the below rectangle 6 times exactly: 2 columns, 3 rows. The top border of the containing rectangle should be orange, the right border yellow, the bottom border green, and the left border blue.</p> + <p>Test fails if the above image repeats in below rectangle more than 6 times, with partial images lining the right and the bottom.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-space.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-space.xht new file mode 100644 index 0000000000..8867520c56 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/background-repeat-space.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 Test: background-repeat:space</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="match" href="reference/background-repeat-space.xht"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'background-repeat: space' declaration must space out images in one or more dimensions so they fit a whole number of times in the background positioning area. The first and last images in each row and column must sit along edge(s) of the background positioning area." /> + <meta name="fuzzy" content="maxDifference=0-53; totalPixels=0-2796" /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + background-image: url("support/rectangle-96x60.png"); + background-repeat: space; + height: 204px; + width: 236px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats in the below grey rectangle 6 times exactly: 2 columns, 3 rows. The images should appear at exactly the same size as the image above and be sitting at the edges of the grey rectangle.</p> + <p>Test fails if the above image repeats in the below rectangle more than 6 times, with partial images lining the right and the bottom.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html new file mode 100644 index 0000000000..289e856b4c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Tiled gradient with spaces is repeated behind the border.</title> +<link rel="match" href="reference/gradient-repeat-spaced-with-borders.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#valdef-background-repeat-space"> +<style> + #foo { + width: 65px; + height: 65px; + border: solid 35px transparent; + background: radial-gradient(transparent 50%, #36c 50%); + background-size: 30px 30px; + background-repeat: space; + } +</style> +<body> + <div id="foo"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-no-repeat.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-no-repeat.xht new file mode 100644 index 0000000000..92bc4346de --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-no-repeat.xht @@ -0,0 +1,23 @@ +<!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 Test Reference: background-repeat:no-repeat</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + height: 150px; + width: 240px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image appears once in the below rectangle. There should be a grey area to the right and bottom of the image.</p> + <div> + <img src="support/rectangle-96x60.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/background-repeat/reference/background-repeat-repeat-x.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-repeat-x.xht new file mode 100644 index 0000000000..cc36e3d308 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-repeat-x.xht @@ -0,0 +1,40 @@ +<!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 Test Reference: background-repeat:repeat-x</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + height: 150px; + width: 240px; + position: relative; + overflow: hidden; + } + div > img { + position: absolute; + top: 0; + } + div > img.first { + left: 0; + } + div > img.second { + left: 96px; + } + div > img.third { + left: 192px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats horizontally in the below rectangle 2½ times exactly. There should be a grey area below the images, but not to their right.</p> + <div> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="first"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="second"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="third"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-repeat-y.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-repeat-y.xht new file mode 100644 index 0000000000..99dfffcd13 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-repeat-y.xht @@ -0,0 +1,40 @@ +<!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 Test Reference: background-repeat:repeat-y</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + height: 150px; + width: 240px; + position: relative; + overflow: hidden; + } + div > img { + position: absolute; + left: 0; + } + div > img.first { + top: 0; + } + div > img.second { + top: 60px; + } + div > img.third { + top: 120px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats vertically in the below rectangle 2½ times exactly. There should be a grey area to the right of the images, but not below them.</p> + <div> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="first"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="second"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="third"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-round-roundup.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-round-roundup.xht new file mode 100644 index 0000000000..f915286485 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-round-roundup.xht @@ -0,0 +1,39 @@ +<!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 Test Reference: background-repeat:round, rounding up</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + height: 212px; + width: 252px; + } + div > img { + float: left; + height: 53px; + width: 84px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats in the below rectangle 12 times exactly: 3 columns, 4 rows. The top border of the containing rectangle should be orange, the right border yellow, the bottom border green, and the left border blue.</p> + <p>Test fails if the above image repeats in below rectangle less than 12 times, with partial images lining the right and the bottom.</p> + <div> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.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/background-repeat/reference/background-repeat-round.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-round.xht new file mode 100644 index 0000000000..a5f308a144 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-round.xht @@ -0,0 +1,33 @@ +<!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 Test Reference: background-repeat:round</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + height: 210px; + width: 236px; + } + div > img { + float: left; + height: 68px; + width: 118px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats in the below rectangle 6 times exactly: 2 columns, 3 rows. The top border of the containing rectangle should be orange, the right border yellow, the bottom border green, and the left border blue.</p> + <p>Test fails if the above image repeats in below rectangle more than 6 times, with partial images lining the right and the bottom.</p> + <div> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.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/background-repeat/reference/background-repeat-space.xht b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-space.xht new file mode 100644 index 0000000000..eb0d3c05a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/background-repeat-space.xht @@ -0,0 +1,40 @@ +<!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 Test Reference: background-repeat:space</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + background-color: grey; + height: 204px; + width: 236px; + } + div > img { + float: left; + margin-bottom: 12px; + margin-right: 44px; + } + div > img.second { + margin-right: 0; + } + div > img.bottom { + margin-bottom: 0; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image repeats in the below grey rectangle 6 times exactly: 2 columns, 3 rows. The images should appear at exactly the same size as the image above and be sitting at the edges of the grey rectangle.</p> + <p>Test fails if the above image repeats in the below rectangle more than 6 times, with partial images lining the right and the bottom.</p> + <div> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" /> + <img src="support/rectangle-96x60.png" class="second" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" class="second" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" class="bottom" alt="Image download support must be enabled"/> + <img src="support/rectangle-96x60.png" class="bottom second" alt="Image download support must be enabled"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html new file mode 100644 index 0000000000..0c226c8c78 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Spaced Gradient</title> +<style> + #foo { + width: calc(4 * 30px + 3 * 5px); + height: calc(4 * 30px + 3 * 5px); + background: radial-gradient(transparent 50%, #36c 50%); + background-size: 30px 30px; + background-repeat: space; + } +</style> +<body> + <div id="foo"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/support/rectangle-96x60.png b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/support/rectangle-96x60.png Binary files differnew file mode 100644 index 0000000000..add0d272b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/reference/support/rectangle-96x60.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-repeat/support/rectangle-96x60.png b/testing/web-platform/tests/css/css-backgrounds/background-repeat/support/rectangle-96x60.png Binary files differnew file mode 100644 index 0000000000..add0d272b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-repeat/support/rectangle-96x60.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-rounded-image-clip-001.html b/testing/web-platform/tests/css/css-backgrounds/background-rounded-image-clip-001.html new file mode 100644 index 0000000000..e6222190c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-rounded-image-clip-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Background Clip Follows Rounded Corner</title> +<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-22547"> +<link rel="match" href="reference/background-rounded-image-clip.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> +<style> + html { + background-color: green; + } + #a { + top: 20px; + left: 20px; + position: absolute; + width: 20px; + height: 20px; + background-color: black; + } + + #b { + position: absolute; + width: 300px; + height: 200px; + background-image: linear-gradient(green, green); + background-clip: content-box; + border-top-left-radius: 90px; + border-width: 10px; + border-style: solid; + border-color: transparent; + } +</style> +<div id="a"></div> +<div id="b"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-rounded-image-clip-002.html b/testing/web-platform/tests/css/css-backgrounds/background-rounded-image-clip-002.html new file mode 100644 index 0000000000..4af7702602 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-rounded-image-clip-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Background Clip Follows Rounded Corner</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-100"> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> +<link rel="help" href="https://github.com/servo/servo/issues/29685"> +<style> +.wrapper { + width: 200px; + height: 200px; + background: red; +} +.wrapper > * { + position: absolute; + width: 100px; + height: 100px; + border: 50px solid green; +} +.round-border { + border-radius: 100px 150px 200px 250px / 350px; +} +.background { + border-color: transparent; + background: linear-gradient(green, green) padding-box; + transform: scale(1.05); +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="wrapper"> + <div class="round-border background"></div> + <div class="round-border"></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-001.html b/testing/web-platform/tests/css/css-backgrounds/background-size-001.html new file mode 100644 index 0000000000..fee271de14 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-001.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background-size - initial and supported values</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <meta name="flags" content="dom" /> + <meta name="assert" content="Check if background-size initial value is auto and supports values auto, cover and contain" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <div id="test"></div> + <script> + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "auto", "background-size initial value"); + }, "background-size_initial"); + + document.getElementById("test").style.backgroundSize = "auto"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "auto", "background-size supporting value"); + }, "background-size_auto"); + + document.getElementById("test").style.backgroundSize = "cover"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "cover", "background-size supporting value"); + }, "background-size_cover"); + + document.getElementById("test").style.backgroundSize = "contain"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "contain", "background-size supporting value"); + }, "background-size_contain"); + + document.getElementById("test").style.backgroundSize = "0px"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "0px", "background-size supporting value"); + }, "background-size_length_zero"); + + document.getElementById("test").style.backgroundSize = "-0px"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "0px", "background-size supporting value"); + }, "background-size_length_negative_zero"); + + document.getElementById("test").style.backgroundSize = "+0px"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "0px", "background-size supporting value"); + }, "background-size_length_positive_zero"); + + document.getElementById("test").style.backgroundSize = "15px"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "15px", "background-size supporting value"); + }, "background-size_length_normal"); + + document.getElementById("test").style.backgroundSize = "0%"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "0%", "background-size supporting value"); + }, "background-size_percentage_min"); + + document.getElementById("test").style.backgroundSize = "50%"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "50%", "background-size supporting value"); + }, "background-size_percentage_normal"); + + document.getElementById("test").style.backgroundSize = "100%"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "100%", "background-size supporting value"); + }, "background-size_percentage_max"); + + document.getElementById("test").style.backgroundSize = "auto auto"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "auto", "background-size supporting value"); + }, "background-size_auto_auto"); + + document.getElementById("test").style.backgroundSize = "auto 15px"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "auto 15px", "background-size supporting value"); + }, "background-size_auto_length"); + + document.getElementById("test").style.backgroundSize = "auto 50%"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "auto 50%", "background-size supporting value"); + }, "background-size_auto_percentage"); + + document.getElementById("test").style.backgroundSize = "15px auto"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "15px", "background-size supporting value"); + }, "background-size_length_auto"); + + document.getElementById("test").style.backgroundSize = "15px 15px"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "15px 15px", "background-size supporting value"); + }, "background-size_length_length"); + + document.getElementById("test").style.backgroundSize = "15px 50%"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "15px 50%", "background-size supporting value"); + }, "background-size_length_percentage"); + + document.getElementById("test").style.backgroundSize = "50% auto"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "50%", "background-size supporting value"); + }, "background-size_percentage_auto"); + + document.getElementById("test").style.backgroundSize = "50% 15px"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "50% 15px", "background-size supporting value"); + }, "background-size_percentage_length"); + + document.getElementById("test").style.backgroundSize = "50% 50%"; + test(function() { + assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"), + "50% 50%", "background-size supporting value"); + }, "background-size_percentage_percentage"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-002.html b/testing/web-platform/tests/css/css-backgrounds/background-size-002.html new file mode 100644 index 0000000000..9a3545ce52 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - initial value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-002-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' with initial value implies to the intrinsic width and height of the image are to be used. Therefore the used width and height of the background-size in this test should be 60px and 60px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 60px; + width: 60px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-repeat: no-repeat; + bottom: 60px; + height: 100px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-003.html b/testing/web-platform/tests/css/css-backgrounds/background-size-003.html new file mode 100644 index 0000000000..dc77ce8c40 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-003.html @@ -0,0 +1,31 @@ +<!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 Test: Value of 'auto' is used for y dimension in 'background-size'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <meta name="assert" content="An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension." /> + <style type="text/css"> + .test + { + width: 100px; + height: 100px; + background-repeat: no-repeat; + background-image: url("support/red_color.png"); + background-size: 50px auto; + } + .reference + { + margin-top: -100px; + background: black; + width: 50px; + height: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div class="test"></div> + <div class="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-005.html b/testing/web-platform/tests/css/css-backgrounds/background-size-005.html new file mode 100644 index 0000000000..015c01d70d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one auto keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-002-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has only one value 'auto', then such value is the width of the correspoding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width and height of the background-size in this test should be 60px and 60px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 60px; + width: 60px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-repeat: no-repeat; + background-size: auto; + bottom: 60px; + height: 100px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-006.html b/testing/web-platform/tests/css/css-backgrounds/background-size-006.html new file mode 100644 index 0000000000..81e4c9ea3e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-006.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <length> value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 and 2020-11-18 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9 Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-006-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has only one length value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 45px; + width: 45px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 45px; + bottom: 45px; + height: 100px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-007.html b/testing/web-platform/tests/css/css-backgrounds/background-size-007.html new file mode 100644 index 0000000000..e6b278de0e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-007.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <length> value at minimum</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 and 2020-03-13 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-nothing-below.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '0px', minimum width of the positioning area in length, then such value is the width of the corresponding image and therefore the background image is not to be displayed."> + <style> + div { + background-image: url(/css/support/60x60-red.png); + background-size: 0px; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is nothing below. + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-008.html b/testing/web-platform/tests/css/css-backgrounds/background-size-008.html new file mode 100644 index 0000000000..b1cd64565f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-008.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <length> value at maximum</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <!-- + http://www.gtalbot.org/BrowserBugsSection/review/background-size-008-review.html + --> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '100px', maximum width of the positioning area in length, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px."> + <style> + div { + height: 100px; + width: 100px; + } + #ref-overlapped-red { + background-color: red; + } + #test-overlapping-green { + background-image: url(support/50x50-green.png); + background-repeat: no-repeat; + background-size: 100px; + bottom: 100px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-009.html b/testing/web-platform/tests/css/css-backgrounds/background-size-009.html new file mode 100644 index 0000000000..9d76478ffa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-009.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <percentage> value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 and 2020-11-18 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9 Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-006-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has only one percentage value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. A percentage is relative to the dimensions of the background positioning area. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 45px; + width: 45px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 45%; + bottom: 45px; + height: 50px; + position: relative; + width: 100px; + } + + /* + background-size: 45% is relative to the background positioning area + which is 100px by 100px in this test. + */ + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-010.html b/testing/web-platform/tests/css/css-backgrounds/background-size-010.html new file mode 100644 index 0000000000..578fcdc79a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-010.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <percentage> value at minimum</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 and 2020-03-13 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-nothing-below.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '0%', minimum width of the positioning area in percentage, then such value is the width of the corresponding image and therefore the background image is not to be displayed."> + <style> + div { + background-image: url(/css/support/60x60-red.png); + background-size: 0%; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is nothing below. + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-011.html b/testing/web-platform/tests/css/css-backgrounds/background-size-011.html new file mode 100644 index 0000000000..71bb496baa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-011.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <percentage> value at maximum</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '100%', maximum width of the positioning area in percentage, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px."> + <style> + div { + height: 100px; + width: 100px; + } + #ref-overlapped-red { + background-color: red; + } + #test-overlapping-green { + background-image: url(support/50x50-green.png); + background-repeat: no-repeat; + background-size: 100%; + bottom: 100px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-012.html b/testing/web-platform/tests/css/css-backgrounds/background-size-012.html new file mode 100644 index 0000000000..f7ac4e49ac --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-012.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - two auto keyword values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-002-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has two values 'auto', then the intrinsic width and/or height of the image should be used. Therefore the used width and height of the background-size in this test should be 60px and 60px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 60px; + width: 60px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-repeat: no-repeat; + background-size: auto auto; + bottom: 60px; + height: 100px; + position: relative; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-013.html b/testing/web-platform/tests/css/css-backgrounds/background-size-013.html new file mode 100644 index 0000000000..141631943c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-013.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one auto keyword and one <length> values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has one 'auto' and one length values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width of the background-size in this test should be 100px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 100px; + width: 100px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: auto 100px; + bottom: 100px; + height: 100px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-014.html b/testing/web-platform/tests/css/css-backgrounds/background-size-014.html new file mode 100644 index 0000000000..0f602c6464 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-014.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one auto keyword and one <percentage> values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 and 2020-11-18 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9 Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-006-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has one 'auto' and one percentage values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. A percentage is relative to the dimensions of the background positioning area. Therefore the used width of the background-size in this test should be 45px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 45px; + width: 45px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: auto 45%; + bottom: 45px; + height: 100px; + position: relative; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-015.html b/testing/web-platform/tests/css/css-backgrounds/background-size-015.html new file mode 100644 index 0000000000..2d39bb1b15 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-015.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <length> and one auto keyword values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has one length and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 100px; + width: 100px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 100px auto; + bottom: 100px; + height: 100px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-016.html b/testing/web-platform/tests/css/css-backgrounds/background-size-016.html new file mode 100644 index 0000000000..74ce6f9cba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-016.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - two <length> values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has two length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 100px; + width: 100px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 100px 100px; + bottom: 100px; + height: 100px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-017.html b/testing/web-platform/tests/css/css-backgrounds/background-size-017.html new file mode 100644 index 0000000000..71f216ffbb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-017.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <length> and one <percentage> values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 and 2020-11-18 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9 Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-006-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has one length and one percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 45px; + width: 45px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 45px 45%; + bottom: 45px; + height: 100px; + position: relative; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-018.html b/testing/web-platform/tests/css/css-backgrounds/background-size-018.html new file mode 100644 index 0000000000..d701c2b813 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-018.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <percentage> and one auto keyword values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has one percentage and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 100px; + width: 100px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 50% auto; + bottom: 100px; + height: 100px; + position: relative; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-019.html b/testing/web-platform/tests/css/css-backgrounds/background-size-019.html new file mode 100644 index 0000000000..c95afa55ea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-019.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - one <percentage> and one <length> values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has one percentage and one length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 100px; + width: 100px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 50% 100px; + bottom: 100px; + height: 100px; + position: relative; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-020.html b/testing/web-platform/tests/css/css-backgrounds/background-size-020.html new file mode 100644 index 0000000000..d690703ade --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-020.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - two <percentage> values</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has two percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 100px; + width: 100px; + } + #test-overlapping-green { + background-image: url(support/1x1-green.png); + background-repeat: no-repeat; + background-size: 50% 80%; + bottom: 100px; + height: 125px; + position: relative; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-021.html b/testing/web-platform/tests/css/css-backgrounds/background-size-021.html new file mode 100644 index 0000000000..502063f69f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-021.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size '100% 100%' with background-origin 'content-box'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <!-- + http://www.gtalbot.org/BrowserBugsSection/review/background-size-021-review.html + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-021-ref.html"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 100px by 100px as background-origin is 'content-box'). In this test, the background-image should be scaled from 40px wide and 20px tall to become 100px by 100px."> + + <style> + #ref-overlapped-red { + background-color: red; + left: 30px; + height: 100px; + position: relative; + top: 30px; + width: 100px; + } + #test-overlapping-green { + background-image: url("support/40px-wide-20px-tall-green-rect.png"); + background-origin: content-box; + background-repeat: no-repeat; + background-size: 100% 100%; + border: transparent dotted 5px; + bottom: 100px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + + /* + Background positioning area is 100px wide by 100px tall. + So, the image should be scaled to 100px by 100px. + */ + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-022.html b/testing/web-platform/tests/css/css-backgrounds/background-size-022.html new file mode 100644 index 0000000000..28fd730355 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-022.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background-size '50% auto' with background-origin 'border-box'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px."> + <style> + #ref-overlapped-red { + background-color: red; + height: 160px; + width: 160px; + } + #test-overlapping-img { + background-image: url(support/100x100-blue-and-orange.png); + background-origin: border-box; + background-size: 50% auto; + border: transparent dotted 5px; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + + /* + Background positioning area is 160px wide by 160px tall. + So, the image should be scaled to 80px by 80px (near), + and repeated once in both horizontally and vertically. + */ + } + </style> + </head> + <body> + <p>Test passes if there are 2 rows of 2 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-img"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-023.html b/testing/web-platform/tests/css/css-backgrounds/background-size-023.html new file mode 100644 index 0000000000..0cd6111193 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-023.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: background-size '50% auto' with background-clip 'padding-box'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px."> + <style> + #ref-overlapped-red { + background-color: red; + left: 5px; + height: 150px; + position: relative; + top: 5px; + width: 150px; + } + #test-overlapping-img { + background-clip: padding-box; + background-image: url(support/100x100-blue-and-orange.png); + background-size: 50% auto; + border: transparent dotted 5px; + bottom: 150px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + + /* + Background painting area is 150px wide by 150px tall. + So, the image should be scaled to 75px by 75px (near), + and repeated once in both horizontally and vertically. + */ + } + </style> + </head> + <body> + <p>Test passes if there are 2 rows of 2 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-img"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-024.html b/testing/web-platform/tests/css/css-backgrounds/background-size-024.html new file mode 100644 index 0000000000..2c13b10085 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-024.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size '100% 100%' with background-clip 'content-box'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 150px by 150px in this test), and then the background image is clipped to fit into the content area (it is 100px by 100px as background-clip is 'content-box')."> + <style> + #ref-overlapped-red { + background-color: red; + left: 30px; + height: 100px; + position: relative; + top: 30px; + width: 100px; + } + #test-overlapping-cat { + background-clip: content-box; + background-image: url(support/cat.png); /* 98px wide by 99px tall */ + background-repeat: no-repeat; + background-size: 100% 100%; + border: transparent dotted 5px; + bottom: 100px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + + /* + Background positioning area is 150px wide by 150px tall, + and background painting area is 100px wide by 100px tall. + So, the image should be scaled to 150px by 150px, + and then be clipped to 100px by 100px. + */ + } + </style> + </head> + <body> + <p>Test passes if there is a partially displayed cat and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-cat"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-025.html b/testing/web-platform/tests/css/css-backgrounds/background-size-025.html new file mode 100644 index 0000000000..fb5437fa16 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-025.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size 'auto 61px' with background-repeat 'round'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" title="3.4. Tiling Images: the 'background-repeat' property"> + <link rel="match" href="reference/background-size-025-ref.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio."> + <meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-7294"> + <style> + div { + background-color: red; + background-image: url("support/100x100-blue-and-orange.png"); + background-repeat: round; /* round round */ + background-size: auto 61px; + height: 210px; + width: 210px; + + /* + Background positioning area is 210px wide by 210px tall. + The set background size height is 61px. But because + background repeat is round, then the background image + is rescaled as follows: + Newest height = 210px / (round [210px / 61px]); + Newest height = 210px / (round [3.44]); + Newest height = 210px / (3); + Newest height = 70px; + + The width is rescaled to 70px to keep the original aspect ratio. + */ + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-026.html b/testing/web-platform/tests/css/css-backgrounds/background-size-026.html new file mode 100644 index 0000000000..c824d7c079 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-026.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size 'auto' with background-repeat 'repeat'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-026-ref.xht"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is 'auto' and 'background-repeat' is 'repeat', that the background image is shown at its intrinsic size (98px wide by 99px tall in this test) and repeats in both horizontal and vertical to cover the background painting area (the same as background positioning area in this test)."> + <style> + div { + background-color: red; + background-image: url(support/cat.png); /* 98px wide by 99px tall */ + background-repeat: repeat; /* default */ + background-size: auto; /* default */ + height: 198px; + width: 196px; + + /* + Background positioning area is 196px wide by 198px tall. + So, the image should be repeated twice in horizontal and vertical. + */ + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-027.html b/testing/web-platform/tests/css/css-backgrounds/background-size-027.html new file mode 100644 index 0000000000..b1a603a685 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-027.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size '52px auto' with background-repeat 'repeat round'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" title="3.4. Tiling Images: the 'background-repeat' property"> + <link rel="match" href="reference/background-size-027-ref.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'."> + <meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-5000"> + <style> + div { + background-color: red; + background-image: url(support/100x100-blue-and-orange.png); + background-repeat: repeat round; + background-size: 52px auto; + height: 180px; + width: 156px; + + /* + Background positioning area is 156px wide by 180px tall. + The width of the background image is 52px. + So, the height is rescaled to 52px to keep the original aspect ratio. + Then, because background-repeat is set to repeat round, the + height is rescaled as following: + Newest height = 180px / (round [180px / 52px]); + Newest height = 180px / (round [3.46]); + Newest height = 180px / (3); + Newest height = 60px; + */ + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-028.html b/testing/web-platform/tests/css/css-backgrounds/background-size-028.html new file mode 100644 index 0000000000..20efb4e77b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-028.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size '50px' with background-repeat 'repeat'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-028-ref.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5056"> + <style> + div { + background-color: red; + background-image: url(support/100x100-blue-and-orange.png); + background-repeat: repeat; /* default */ + background-size: 50px; /* 50px auto */ + height: 200px; + width: 200px; + + /* + Background positioning area is 200px wide by 200px tall. + So, the image should be rescaled to 50px by 50px and + then be repeated four times in horizontal and vertical directions. + */ + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-029.html b/testing/web-platform/tests/css/css-backgrounds/background-size-029.html new file mode 100644 index 0000000000..29df68962c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-029.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size '52px auto' with background-repeat 'round repeat'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" title="3.4. Tiling Images: the 'background-repeat' property"> + <link rel="match" href="reference/background-size-029-ref.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically."> + <meta name="fuzzy" content="maxDifference=0-91; totalPixels=0-5292"> + <style> + div { + background-color: red; + background-image: url(support/100x100-blue-and-orange.png); + background-repeat: round repeat; + background-size: 52px auto; + height: 180px; + width: 180px; + + /* + Background positioning area is 180px wide by 180px tall. + The width of the background image is 52px. + But, because background-repeat is set to round repeat, the + width is rescaled as following: + Newest width = 180px / (round [180px / 52px]); + Newest width = 180px / (round [3.46]); + Newest width = 180px / (3); + Newest width = 60px; + + Then the height is rescaled to from 100px to 60px to keep + the original aspect ratio. + */ + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-030.html b/testing/web-platform/tests/css/css-backgrounds/background-size-030.html new file mode 100644 index 0000000000..4d6c7284c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-030.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size '25% 25%' with background-repeat 'repeat'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-17 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-028-ref.xht"> + <meta name="flags" content="image"> + + <meta name="assert" content="Check if 'background-size' is '25% 25%' and 'background-repeat' is 'repeat', then the background image is shown with a width and height of 25% (in this test, 50px by 50px), and then it is repeated in both directions."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5056"> + <style> + div { + background-color: red; + background-image: url(support/100x100-blue-and-orange.png); + background-repeat: repeat; /* default */ + background-size: 25% 25%; + height: 200px; + width: 200px; + + /* + Background positioning area is 200px wide by 200px tall. + So, the image should be rescaled to 50px by 50px + and be repeated four times in horizontal and vertical. + */ + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-031.html b/testing/web-platform/tests/css/css-backgrounds/background-size-031.html new file mode 100644 index 0000000000..e58df81b41 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-031.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size '20% 30%' with background-repeat 'no-repeat round'</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-17 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" title="3.4. Tiling Images: the 'background-repeat' property"> + <link rel="match" href="reference/background-size-031-ref.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled to 20% (50px in this test) of the background area."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-948"> + <style> + #ref-overlapped-red { + background-color: red; + height: 150px; + width: 50px; + } + #test-overlapping-square { + background-image: url(support/100x100-blue-and-orange.png); + background-repeat: no-repeat round; + background-size: 20% 30%; + bottom: 150px; + height: 150px; + position: relative; + width: 250px; + } + /* + Background positioning area is 250px wide by 150px tall. + The width of the background image is 20% of 250px == 50px. + The height is rescaled to 30% of 150px == 45px. + Then, because background-repeat is set to no-repeat round, the + height is rescaled as following: + Newest height = 150px / (round [150px / 45px]); + Newest height = 150px / (round [3.33]); + Newest height = 150px / (3); + Newest height = 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 id="ref-overlapped-red"></div> + <div id="test-overlapping-square"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-032.html b/testing/web-platform/tests/css/css-backgrounds/background-size-032.html new file mode 100644 index 0000000000..28753b25ca --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-032.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - applies to ::first-letter pseudo-element</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-17 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#values"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if background-size is able to apply to the ::first-letter pseudo-element."> + <style> + div {color: white;} + + div::first-letter { + background-image: url(support/blue96x96.png); + background-repeat: repeat no-repeat; + background-size: 100% 50%; + color: black; + font-size: 80px; + } + </style> + </head> + <body> + <p>Test passes if only the <strong>top half</strong> of the E glyph has a <strong>blue background</strong>.</p> + <div>Ex</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-033.html b/testing/web-platform/tests/css/css-backgrounds/background-size-033.html new file mode 100644 index 0000000000..88dfc89fb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-033.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - applies to ::first-line pseudo-element</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-17 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#values"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if background-size is able to apply to the ::first-line pseudo-element."> + <style> + div {color: white;} + + div::first-line { + background-image: url(support/blue96x96.png); + background-repeat: repeat no-repeat; + background-size: 100% 50%; + color: black; + font-size: 80px; + } + </style> + </head> + <body> + <p>Test passes if only the <strong>top half</strong> of "Text sample" has a <strong>blue background</strong>.</p> + <div>Text sample<br> text sample text sample</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-034.html b/testing/web-platform/tests/css/css-backgrounds/background-size-034.html new file mode 100644 index 0000000000..0debc25b2b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-034.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - inherit keyword value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-17 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#values"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="image"> + <meta name="assert" content="Check if background-size supports inherit keyword as its property value."> + <style> + #container { + background-size: 25% 50%; + } + #ref-overlapped-red { + background-color: red; + height: 100px; + width: 100px; + } + #test-overlapping-green { + background-image: url(support/50x50-green.png); + background-repeat: no-repeat; + background-size: inherit; + bottom: 100px; + height: 200px; + position: relative; + width: 400px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-041.html b/testing/web-platform/tests/css/css-backgrounds/background-size-041.html new file mode 100644 index 0000000000..89a5210278 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-041.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size with <length> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> + + <!-- + Credit should go to Henrik Andersson + for originally reporting this issue. + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + + <!-- + + [css-backgrounds] [css-images] Interop for sizing gradients with only width + http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html + + Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect + https://bugs.chromium.org/p/chromium/issues/detail?id=935057 + + Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered + https://bugs.webkit.org/show_bug.cgi?id=170834 + + --> + + <link rel="match" href="reference/background-size-041-ref.html"> + + <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> + + <style> + div + { + background-clip: border-box; + background-image: linear-gradient(orange, blue); + background-origin: content-box; + background-position: center; + background-repeat: no-repeat; + background-size: 200px auto; + border: solid 40px; + border-color: transparent black; + height: 400px; + width: 400px; + } + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-042.html b/testing/web-platform/tests/css/css-backgrounds/background-size-042.html new file mode 100644 index 0000000000..9e1e041e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-042.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size with <percent> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> + + <!-- + Credit should go to Henrik Andersson + for originally reporting this issue. + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + + <!-- + + [css-backgrounds] [css-images] Interop for sizing gradients with only width + http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html + + Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect + https://bugs.chromium.org/p/chromium/issues/detail?id=935057 + + Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered + https://bugs.webkit.org/show_bug.cgi?id=170834 + + --> + + <link rel="match" href="reference/background-size-041-ref.html"> + + <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> + + <style> + div + { + background-clip: border-box; + background-image: linear-gradient(orange, blue); + background-origin: content-box; + background-position: center; + background-repeat: no-repeat; + background-size: 50% auto; + border: solid 40px; + border-color: transparent black; + height: 400px; + width: 400px; + } + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-043.html b/testing/web-platform/tests/css/css-backgrounds/background-size-043.html new file mode 100644 index 0000000000..e641926ef6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-043.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size with <length> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> + + <!-- + Credit should go to Henrik Andersson + for originally reporting this issue. + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + + <!-- + + [css-backgrounds] [css-images] Interop for sizing gradients with only width + http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html + + Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect + https://bugs.chromium.org/p/chromium/issues/detail?id=935057 + + Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered + https://bugs.webkit.org/show_bug.cgi?id=170834 + + --> + + <link rel="match" href="reference/background-size-043-ref.html"> + + <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> + + <style> + div + { + background-clip: border-box; + background-image: url("support/orange-intrinsic-none.svg"); + background-origin: content-box; + background-position: center; + background-repeat: no-repeat; + background-size: 200px auto; + border: solid 40px; + border-color: transparent black; + height: 400px; + width: 400px; + } + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-044.html b/testing/web-platform/tests/css/css-backgrounds/background-size-044.html new file mode 100644 index 0000000000..67f032c345 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-044.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size with <percent> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> + + <!-- + Credit should go to Henrik Andersson + for originally reporting this issue. + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + + <!-- + + [css-backgrounds] [css-images] Interop for sizing gradients with only width + http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html + + Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect + https://bugs.chromium.org/p/chromium/issues/detail?id=935057 + + Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered + https://bugs.webkit.org/show_bug.cgi?id=170834 + + --> + + <link rel="match" href="reference/background-size-043-ref.html"> + + <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> + + <style> + div + { + background-clip: border-box; + background-image: url("support/orange-intrinsic-none.svg"); + background-origin: content-box; + background-position: center; + background-repeat: no-repeat; + background-size: 50% auto; + border: solid 40px; + border-color: transparent black; + height: 400px; + width: 400px; + } + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-applies-to-block.htm b/testing/web-platform/tests/css/css-backgrounds/background-size-applies-to-block.htm new file mode 100644 index 0000000000..ea07154098 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-applies-to-block.htm @@ -0,0 +1,25 @@ +<!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 Test: 'Background-size' applied to element with a display of 'block'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <meta name="assert" content="'Background-size' property applies to elements with 'display: block'." /> + <style type="text/css"> + span + { + display: block; + height: 2in; + width: 2in; + border: 20px solid black; + padding: 20px; + background: url("support/black_color.png") no-repeat red; + background-size: 100% 100%; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <span></span> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-aspect-ratio.htm b/testing/web-platform/tests/css/css-backgrounds/background-size-aspect-ratio.htm new file mode 100644 index 0000000000..1778acc1f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-aspect-ratio.htm @@ -0,0 +1,43 @@ +<!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 Test: Original aspect ratio of image is maintained when 'background-size: auto' and 'background-repeat: round'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <meta name="assert" content="If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored." /> + <style type="text/css"> + .reference + { + width: 1in; + height: 1in; + background: url("../support/cat.png") no-repeat; + background-size: 80px 80px; + } + .test1 + { + width: 400px; + height: 150px; + border: thick solid black; + background-image: url("../support/cat.png"); + background-repeat: round no-repeat; + background-size: 83px auto; + margin-bottom: 10px; + } + .test2 + { + width: 150px; + height: 400px; + border: thick solid black; + background-image: url("../support/cat.png"); + background-repeat: no-repeat round; + background-size: auto 83px; + } + </style> + </head> + <body> + <p>Test passes if there are five unclipped cats in each of the two boxes, and if all the cats on the page are the same size.</p> + <div class="reference"></div> + <div class="test1"></div> + <div class="test2"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-contain-001.html b/testing/web-platform/tests/css/css-backgrounds/background-size-contain-001.html new file mode 100644 index 0000000000..145d5abfcf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-contain-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title> + + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-08 --> + <!-- + http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-001-review.html + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px."> + <style> + div#ref-overlapped-red + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + background-image: url("support/50x50-green.png"); + background-repeat: no-repeat; + background-size: contain; + bottom: 100px; + height: 50px; + padding: 25px; + position: relative; + width: 150px; + + /* + Background positioning area is 200px wide by 100px tall. + So, the image should be scaled to 100px by 100px. + */ + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-contain-002.html b/testing/web-platform/tests/css/css-backgrounds/background-size-contain-002.html new file mode 100644 index 0000000000..bfbfdbe20a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-contain-002.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title> + + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-08 --> + <!-- + http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-002-review.html + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px."> + <style> + div#ref-overlapped-red + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + background-image: url("support/50x50-green.png"); + background-repeat: no-repeat; + background-size: contain; + bottom: 100px; + height: 150px; + padding: 25px; + position: relative; + width: 50px; + + /* + Background positioning area is 100px wide by 200px tall. + So, the image should be scaled to 100px by 100px. + */ + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-cover-001.html b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-001.html new file mode 100644 index 0000000000..f986680640 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size - cover keyword value</title> + + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-08 --> + <!-- + http://www.gtalbot.org/BrowserBugsSection/review/background-size-cover-001-review.html + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px."> + <style> + div#ref-overlapped-red + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + background-image: url("support/50x50-green.png"); + background-repeat: no-repeat; + background-size: cover; + border-bottom: transparent solid 50px; + bottom: 100px; + height: 0px; + padding: 25px; + position: relative; + width: 50px; + + /* + Background positioning area to cover in this + test is 100px wide by 50px tall. + So, the image should be scaled to 100px by 100px. + */ + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-cover-002.html b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-002.html new file mode 100644 index 0000000000..6328af2ba2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-002.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: background-size - cover keyword value</title> + + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-08 --> + <!-- + http://www.gtalbot.org/BrowserBugsSection/review/background-size-cover-002-review.html + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px."> + <style> + div#ref-overlapped-red + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + background-image: url("support/50x50-green.png"); + background-repeat: no-repeat; + background-size: cover; + border-right: transparent solid 50px; + bottom: 100px; + height: 50px; + padding: 25px; + position: relative; + width: 0px; + + /* + Background positioning area to cover in this + test is 50px wide by 100px tall. + So, the image should be scaled to 100px by 100px. + */ + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-cover-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-003-ref.html new file mode 100644 index 0000000000..bd965cfecf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-003-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> +body { margin: 0 } +.first { + width: 100px; + height: 50px; + background: lime; +} +.space { + height: 50px; +} +.second { + width: 100px; + height: 100px; + background: lime; +} +</style> +<div class="first"></div> +<div class="space"></div> +<div class="second"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-cover-003.html b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-003.html new file mode 100644 index 0000000000..4d2b6b125e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-cover-003.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS Test: background-size: cover with zero-sized background positioning area.</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#valdef-background-size-cover"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4049"> +<link rel="help" href=" https://bugzilla.mozilla.org/show_bug.cgi?id=1559094"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="background-size-cover-003-ref.html"> +<style> +body { margin: 0 } +div { + background-size: cover; + background-repeat: no-repeat; + background-position: top left; + background-origin: content-box; + background-image: url(/images/green-100x50.png); +} +#test1 { + height: 0; + width: 100px; + padding-bottom: 100px; +} + +#test2 { + height: 100px; + width: 0; + padding-right: 100px; +} +#test3 { + height: 0; + width: 0; + padding-right: 100px; + padding-bottom: 100px; +} +</style> +<div id="test1"></div> +<div id="test2"></div> +<div id="test3"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-one-value-1x1-image.html b/testing/web-platform/tests/css/css-backgrounds/background-size-one-value-1x1-image.html new file mode 100644 index 0000000000..5caf2d4956 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-one-value-1x1-image.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: A single size value with a 1x1 image should work as intended</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="match" href="reference/background-size-one-value-1x1-image-ref.html"> + <style type="text/css"> + .backgroundSize{ + background: url("support/1x1-green.png"); + background-size: 50%; + 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/background-size-percentage-root-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size-percentage-root-ref.html new file mode 100644 index 0000000000..166f9e987b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-percentage-root-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Percentage background-size on the root</title> +<style> + div { + width: 100px; + height: 50px; + background-color: lime; + position: absolute; + top: 0; + left: 0; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-percentage-root.html b/testing/web-platform/tests/css/css-backgrounds/background-size-percentage-root.html new file mode 100644 index 0000000000..896ce85336 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-percentage-root.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>Percentage background-size on the root, when it's out-of-flow</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1658140"> +<link rel="match" href="background-size-percentage-root-ref.html"> +<style> + :root { + position: fixed; + width: 100px; + height: 50px; + background-size: 100%; + background-repeat: no-repeat; + background-image: url('/images/green-100x50.png'); + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size-with-negative-value.html b/testing/web-platform/tests/css/css-backgrounds/background-size-with-negative-value.html new file mode 100644 index 0000000000..a9d57f86d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size-with-negative-value.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Backgrounds and Borders Test: background-size - negative value</title> + <link rel="author" title="Zhuoyu Qian" href="mailto:zhuoyu.qian@samsung.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="match" href="reference/background-size-002-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="Check if 'background-size' has the negative values, then such values are not allowed and they will be assumed to be 'auto'."> + <style> + #ref-overlapped-red { + background-color: red; + height: 45px; + width: 45px; + } + #test-overlapping-green { + background-image: url(support/60x60-green.png); + background-repeat: no-repeat; + background-size: -1px -1px; + bottom: 45px; + height: 100px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="ref-overlapped-red"></div> + <div id="test-overlapping-green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-contain.xht b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-contain.xht new file mode 100644 index 0000000000..7309905bba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-contain.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 Test: background-size:contain</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="match" href="reference/background-size-contain.xht"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area." /> + <style type="text/css"> + <![CDATA[ + div { + background-color: red; + background-image: url("support/rectangle-96x60.png"); + background-size: contain; + height: 200px; + width: 200px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image appears, scaled and repeating vertically, inside the below square.</p> + <p>Test fails if any red area is seen outside of the image.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-contain-001.xht b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-contain-001.xht new file mode 100644 index 0000000000..0f43213de6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-contain-001.xht @@ -0,0 +1,65 @@ +<!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 Backgrounds and Borders Test: background-size - cover value and contain value</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property" /> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px." /> + + <style type="text/css"><![CDATA[ + div#overlapped-red + { + background-image: url("support/200x200-red.png"); + background-repeat: no-repeat; + background-size: contain; + height: 150px; + padding: 25px; + width: 50px; + /* + background positioning area is 100px wide by 200px tall. + The largest size that can fit inside it with a 1:1 ratio + is 100px by 100px. So, the background image should be + scaled to 100px by 100px. + */ + } + + div#overlapping-green + { + background-image: url("support/50x50-green.png"); + background-repeat: no-repeat; + background-size: cover; + border-bottom: transparent solid 50px; + bottom: 200px; + height: 0px; + padding: 25px; + position: relative; + width: 50px; + + /* + background positioning area to cover is 100px wide by + 50px tall. The smallest size that can completely cover + it with a 1:1 ratio is 100px by 100px. So, the + background image should be scaled to 100px by 100px. + */ + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="overlapped-red"></div> + + <div id="overlapping-green"></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-contain-002.xht b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-contain-002.xht new file mode 100644 index 0000000000..d168e154fb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-contain-002.xht @@ -0,0 +1,65 @@ +<!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 Backgrounds and Borders Test: background-size - cover value and contain value</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property" /> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px." /> + + <style type="text/css"><![CDATA[ + div#overlapped-red + { + background-image: url("support/200x200-red.png"); + background-repeat: no-repeat; + background-size: contain; + height: 50px; + padding: 25px; + width: 150px; + /* + background positioning area is 200px wide by 100px tall. + The largest size that can fit inside it with a 1:1 ratio + is 100px by 100px. So, the background image should be + scaled to 100px by 100px. + */ + } + + div#overlapping-green + { + background-image: url("support/50x50-green.png"); + background-repeat: no-repeat; + background-size: cover; + border-right: transparent solid 50px; + bottom: 100px; + height: 50px; + padding: 25px; + position: relative; + width: 0px; + + /* + background positioning area to cover is 50px wide by + 100px tall. The smallest size that can completely cover + it with a 1:1 ratio is 100px by 100px. So, the + background image should be scaled to 100px by 100px. + */ + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="overlapped-red"></div> + + <div id="overlapping-green"></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-svg.html b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-svg.html new file mode 100644 index 0000000000..67f3bcac7d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover-svg.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: A SVG background should fully cover the positioning area</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-size"> + <link rel="match" href="reference/background-size-cover-svg-ref.html"> + <meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-1200"> + <style> + div { + height: 400px; + width: 600px; + position: relative; + background-color: red; + background-size: cover; + background-repeat: no-repeat; + background-position: bottom center; + background-image: url("support/rectangle-2560x208.svg"); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover.xht b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover.xht new file mode 100644 index 0000000000..c88e7fd2ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-cover.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 Test: background-size:cover</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <link rel="match" href="reference/background-size-cover.xht"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area." /> + <style type="text/css"> + <![CDATA[ + div { + background-color: red; + background-image: url("support/rectangle-96x60.png"); + background-size: cover; + height: 200px; + width: 200px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if a scaled portion of above image appears inside the below square.</p> + <p>Test fails if any red area is seen outside of the image.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-color.html b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-color.html new file mode 100644 index 0000000000..b85895b85b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-color.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>Color background with near-zero background-size</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size"> +<link rel="match" href="reference/background-size-near-zero-ref.html"> +<div style="background-color: green; + width: 100px; height: 100px; background-size: 0.2px 0.2px"> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-gradient.html b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-gradient.html new file mode 100644 index 0000000000..a232fc8c03 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-gradient.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>Gradient background with near-zero background-size</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image"> +<link rel="match" href="reference/background-size-near-zero-ref.html"> +<div style="background-image: linear-gradient(green, green); + width: 100px; height: 100px; background-size: 0.2px 0.2px"> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-png.html b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-png.html new file mode 100644 index 0000000000..c57f322d23 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-png.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>PNG background with near-zero background-size</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image"> +<link rel="match" href="reference/background-size-near-zero-ref.html"> +<div style="background-image: url(support/50x50-green.png); + width: 100px; height: 100px; background-size: 0.2px 0.2px"> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-svg.html b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-svg.html new file mode 100644 index 0000000000..ff7b9bb491 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/background-size-near-zero-svg.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>SVG background with near-zero background-size</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image"> +<link rel="match" href="reference/background-size-near-zero-ref.html"> +<div style="background-image: url(support/50x50-green.svg); + width: 100px; height: 100px; background-size: 0.2px 0.2px"> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-contain.xht b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-contain.xht new file mode 100644 index 0000000000..62e1ed65f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-contain.xht @@ -0,0 +1,39 @@ +<!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 Test Reference: background-size:contain</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + background-color: red; + height: 200px; + width: 200px; + position: relative; + overflow: hidden; + } + div > img { + height: 125px; + width: 200px; + position: absolute; + left: 0; + } + div > img.first { + top: 0; + } + div > img.second { + top: 125px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if the above image appears, scaled and repeating vertically, inside the below square.</p> + <p>Test fails if any red area is seen outside of the image.</p> + <div> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="first"/> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="second"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-cover-svg-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-cover-svg-ref.html new file mode 100644 index 0000000000..b6dd172aa6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-cover-svg-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> + div { + height: 400px; + width: 600px; + position: relative; + background-color: red; + background-repeat: repeat; + background-position: bottom center; + background-image: url("../support/50x50-green.png"); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-cover.xht b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-cover.xht new file mode 100644 index 0000000000..29ac66132d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-cover.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 Test Reference: background-size:cover</title> + <link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" /> + <style type="text/css"> + <![CDATA[ + div { + background-color: red; + height: 200px; + width: 200px; + overflow: hidden; + } + div > img { + height: 200px; + width: 320px; + } + ]]> + </style> + </head> + <body> + <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> + <p>Test passes if a scaled portion of above image appears inside the below square.</p> + <p>Test fails if any red area is seen outside of the image.</p> + <div> + <img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-near-zero-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-near-zero-ref.html new file mode 100644 index 0000000000..ebd2d860ce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/background-size-near-zero-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/reference/support/rectangle-96x60.png b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/support/rectangle-96x60.png Binary files differnew file mode 100644 index 0000000000..add0d272b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/reference/support/rectangle-96x60.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/support/200x200-red.png b/testing/web-platform/tests/css/css-backgrounds/background-size/support/200x200-red.png Binary files differnew file mode 100644 index 0000000000..f55ed7bbb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/support/200x200-red.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/support/50x50-green.png b/testing/web-platform/tests/css/css-backgrounds/background-size/support/50x50-green.png Binary files differnew file mode 100644 index 0000000000..6c1406b7df --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/support/50x50-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/support/50x50-green.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/support/50x50-green.svg new file mode 100644 index 0000000000..21af545019 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/support/50x50-green.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> + <rect fill="green" width="50" height="50"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/support/rectangle-2560x208.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/support/rectangle-2560x208.svg new file mode 100644 index 0000000000..578dd86ae0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/support/rectangle-2560x208.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 208"> + <rect fill="green" width="2560" height="208"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/support/rectangle-96x60.png b/testing/web-platform/tests/css/css-backgrounds/background-size/support/rectangle-96x60.png Binary files differnew file mode 100644 index 0000000000..add0d272b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/support/rectangle-96x60.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-001.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-001.html new file mode 100644 index 0000000000..96b630366f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-001.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/background-size-vector-001-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-002.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-002.html new file mode 100644 index 0000000000..a54c8529b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-002.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/background-size-vector-001-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-003.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-003.html new file mode 100644 index 0000000000..e3234baabd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-003.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-004.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-004.html new file mode 100644 index 0000000000..5fa0857ca4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-004.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime16x192-aqua16x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-005.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-005.html new file mode 100644 index 0000000000..425763666e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-005.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-006.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-006.html new file mode 100644 index 0000000000..2392366b0f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-006.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime16x192-aqua16x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-007.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-007.html new file mode 100644 index 0000000000..6dc0339c76 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-007.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-008.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-008.html new file mode 100644 index 0000000000..9f7b634404 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-008.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/background-size-vector-008-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-009.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-009.html new file mode 100644 index 0000000000..a09eed9258 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-009.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-010.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-010.html new file mode 100644 index 0000000000..8a526627b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-010.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime16x192-aqua16x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-011.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-011.html new file mode 100644 index 0000000000..bd319e78e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-011.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall--32px-auto--omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-012.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-012.html new file mode 100644 index 0000000000..59748b0fcf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-012.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime16x192-aqua16x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-013.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-013.html new file mode 100644 index 0000000000..01193f238f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-013.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-014.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-014.html new file mode 100644 index 0000000000..a9e77c8191 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-014.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/background-size-vector-008-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-015.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-015.html new file mode 100644 index 0000000000..f2eb47dd29 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-015.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-016.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-016.html new file mode 100644 index 0000000000..0252faf7f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-016.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime16x192-aqua16x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-017.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-017.html new file mode 100644 index 0000000000..5b6863d8b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-017.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-018.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-018.html new file mode 100644 index 0000000000..29a366ebbc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-018.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -32px-auto- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 16px auto; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime16x192-aqua16x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: 16px auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-019.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-019.html new file mode 100644 index 0000000000..5c602345a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-019.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-020.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-020.html new file mode 100644 index 0000000000..998d6da729 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-020.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -nonpercent-width-nonpercent-height.html + --> + + <title>tall background-size: auto; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-021.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-021.html new file mode 100644 index 0000000000..09715b26bc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-021.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/background-size-vector-021-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-022.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-022.html new file mode 100644 index 0000000000..dff3c79d7c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-022.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/background-size-vector-022-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-023.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-023.html new file mode 100644 index 0000000000..f78d4f0dcd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-023.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/background-size-vector-021-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-024.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-024.html new file mode 100644 index 0000000000..719a65d31a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-024.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/background-size-vector-022-ref.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-025.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-025.html new file mode 100644 index 0000000000..e5429c3f0d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-025.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-026.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-026.html new file mode 100644 index 0000000000..32b63570ba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-026.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime128x16-aqua128x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-027.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-027.html new file mode 100644 index 0000000000..ff302b8d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-027.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime24x192-aqua24x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-028.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-028.html new file mode 100644 index 0000000000..79a1361115 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-028.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-t-lime128x192-aqua128x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-029.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-029.html new file mode 100644 index 0000000000..9089549681 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/background-size-vector-029.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-t-lime24x192-aqua24x192.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 8px; + height: 384px; + width: 128px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/diagonal-percentage-vector-background.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/diagonal-percentage-vector-background.html new file mode 100644 index 0000000000..75c8fd4685 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/diagonal-percentage-vector-background.html @@ -0,0 +1,89 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + diagonal-percentage-vector-background.html + --> + + <title>CSS Backgrounds and Borders Test: scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/diagonal-percentage-vector-background-ref.html"> + + <meta name="flags" content="svg"> + <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-360" /> + + <style type="text/css"> + div + { + background-image: url("support/diagonal-scaled.svg"); + background-repeat: no-repeat; + border: black solid 8px; + height: 360px; + width: 436px; + } + + /* + + Complete quotation of the SVG object code: + + <svg xmlns="http://www.w3.org/2000/svg"> + <title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> + <!-- + A percent stroke-width is resolved with respect to: + + d = sqrt(vh**2 + vw**2) / sqrt(2) + + where vh/vw are the image viewport width/height. Because this image has no + intrinsic dimensions or ratio, it expands to fill the entire background + positioning area, so its width is 100px and its height is 700px. For those + carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide + rectangle, vertically centered and horizontally left-aligned in the image. + --> + <line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/> +</svg> + + So: + + d = sqrt(vh**2 + vw**2) / sqrt(2) + + With width: 436px; (instead of 100px) and height: 360px; (instead of 700px): + + d == sqrt ((436 mult 436) + (360 mult 360)) / sqrt(2) + + d == sqrt ((190096) + (129600)) / sqrt(2) + + d == sqrt ((319696)) / sqrt(2) + + d == 565.416660526px / 1.41421356237 + + d == 399.809954854px + + and so 10% of 399.809954854px == 39.9809954854px =~ 40px + + */ + + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-001-ref.html new file mode 100644 index 0000000000..9f0c4de562 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-001-ref.html @@ -0,0 +1,53 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 64px; + width: 16px; + } + + div#inner > div + { + height: 32px; + width: 16px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-008-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-008-ref.html new file mode 100644 index 0000000000..1894407ae8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-008-ref.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime32x16-aqua32x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 32px; + width: 16px; + } + + div#inner > div + { + height: 16px; + width: 16px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-021-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-021-ref.html new file mode 100644 index 0000000000..941dd196be --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-021-ref.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime8x64-aqua8x64.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 128px; + width: 8px; + } + + div#inner > div + { + height: 64px; + width: 8px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-022-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-022-ref.html new file mode 100644 index 0000000000..96431e7b3d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/background-size-vector-022-ref.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime8x384-aqua8x384.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 384px; + width: 8px; + } + + div#inner > div + { + height: 192px; + width: 8px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/diagonal-percentage-vector-background-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/diagonal-percentage-vector-background-ref.html new file mode 100644 index 0000000000..a370146231 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/diagonal-percentage-vector-background-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> + +<html> + + <head> + + <meta charset="utf-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style type="text/css"> + table + { + border: black solid 8px; + border-spacing: 0px; + height: 376px; /* 360px tall plus 2 mult 8px borders == 376px */ + table-layout: fixed; + width: 452px; /* 436px wide plus 2 mult 8px borders == 452px */ + } + + col#first-column {width: 89px;} /* (25% of 436px) - (40px / 2) */ + + col#second-column {width: 40px;} + + /* + + Complete quotation of the SVG object code: + + <svg xmlns="http://www.w3.org/2000/svg"> + <title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> + <!-- + A percent stroke-width is resolved with respect to: + + d = sqrt(vh**2 + vw**2) / sqrt(2) + + where vh/vw are the image viewport width/height. Because this image has no + intrinsic dimensions or ratio, it expands to fill the entire background + positioning area, so its width is 100px and its height is 700px. For those + carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide + rectangle, vertically centered and horizontally left-aligned in the image. + --> + <line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/> +</svg> + + So: + + d = sqrt(vh**2 + vw**2) / sqrt(2) + + With width: 436px; (instead of 100px) and height: 360px; (instead of 700px): + + d == sqrt ((436 mult 436) + (360 mult 360)) / sqrt(2) + + d == sqrt ((190096) + (129600)) / sqrt(2) + + d == sqrt ((319696)) / sqrt(2) + + d == 565.416660526px / 1.41421356237 + + d == 399.809954854px + + and so 10% of 399.809954854px == 39.9809954854px =~ 40px + + */ + + td + { + height: 90px; + padding: 0px; + } + + td.lime {background-color: lime;} + + td.fuchsia {background-color: fuchsia;} + + td.aqua {background-color: aqua;} + </style> + + </head> + + <body> + + <table> + + <col id="first-column"><col id="second-column"><col> + + <tr><td class="lime"></td><td class="lime"></td><td class="lime"></td></tr> + + <tr><td class="lime"></td><td class="fuchsia"></td><td class="lime"></td></tr> + + <tr><td class="aqua"></td><td class="fuchsia"></td><td class="aqua"></td></tr> + + <tr><td class="aqua"></td><td class="aqua"></td><td class="aqua"></td></tr> + + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime128x16-aqua128x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime128x16-aqua128x16.html new file mode 100644 index 0000000000..e814541a66 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime128x16-aqua128x16.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime256x16-aqua256x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 32px; + width: 128px; + } + + div#inner > div + { + height: 16px; + width: 128px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime128x192-aqua128x192.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime128x192-aqua128x192.html new file mode 100644 index 0000000000..a77b4e2041 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime128x192-aqua128x192.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime256x384-aqua256x384.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 384px; + width: 128px; + } + + div#inner > div + { + height: 192px; + width: 128px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime16x128-aqua16x128.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime16x128-aqua16x128.html new file mode 100644 index 0000000000..c46a990dd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime16x128-aqua16x128.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime32x256-aqua32x256.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 256px; + width: 16px; + } + + div#inner > div + { + height: 128px; + width: 16px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime16x192-aqua16x192.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime16x192-aqua16x192.html new file mode 100644 index 0000000000..56a63d15a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime16x192-aqua16x192.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime32x384-aqua32x384.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 384px; + width: 16px; + } + + div#inner > div + { + height: 192px; + width: 16px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime24x192-aqua24x192.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime24x192-aqua24x192.html new file mode 100644 index 0000000000..e064b78c71 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime24x192-aqua24x192.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime48x384-aqua48x384.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 384px; + width: 24px; + } + + div#inner > div + { + height: 192px; + width: 24px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime2x16-aqua2x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime2x16-aqua2x16.html new file mode 100644 index 0000000000..f1074b713c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime2x16-aqua2x16.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime2x16-aqua2x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 32px; + width: 2px; + } + + div#inner > div + { + height: 16px; + width: 2px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime8x16-aqua8x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime8x16-aqua8x16.html new file mode 100644 index 0000000000..4db046a064 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-t-lime8x16-aqua8x16.html @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime8x16-aqua8x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> + div#outer + { + border: black solid 8px; + height: 384px; + width: 128px; + } + + div#inner + { + height: 32px; + width: 8px; + } + + div#inner > div + { + height: 16px; + width: 8px; + } + + div#top {background-color: lime;} + + div#bottom {background-color: aqua;} + </style> + + </head> + + <body> + + <div id="outer"> + <div id="inner"> + <div id="top"></div> + <div id="bottom"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-empty.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-empty.html new file mode 100644 index 0000000000..44e97d195b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-empty.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-empty.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime.html new file mode 100644 index 0000000000..9a5a9847d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime.html @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background: lime; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime192x384-aqua192x384.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime192x384-aqua192x384.html new file mode 100644 index 0000000000..9922dfb2ad --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime192x384-aqua192x384.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime192x384-aqua192x384.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 192px; height: 768px; +} +#inner > div { width: 192px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x16-aqua256x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x16-aqua256x16.html new file mode 100644 index 0000000000..8e31125cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x16-aqua256x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 256x16 lime, 256x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 256px; height: 32px; +} +#inner > div { width: 256px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x384-aqua256x384.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x384-aqua256x384.html new file mode 100644 index 0000000000..1060860355 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x384-aqua256x384.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 256x384 lime, 256x384 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 256px; height: 768px; +} +#inner > div { width: 256px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x512-aqua256x256.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x512-aqua256x256.html new file mode 100644 index 0000000000..3b38d9260c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x512-aqua256x256.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime256x512-aqua256x256.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 256px; height: 768px; +} +#inner > div { width: 256px; } +#top { background-color: lime; height: 512px; } +#bottom { background-color: aqua; height: 256px; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x768.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x768.html new file mode 100644 index 0000000000..53e5896bfd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime256x768.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime256x768.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +#outer +{ + width: 256px; height: 768px; + background-color: lime; + border: 1px solid black; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime2x16-aqua2x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime2x16-aqua2x16.html new file mode 100644 index 0000000000..d95edcda43 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime2x16-aqua2x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 2x16 lime, 2x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 2px; height: 32px; +} +#inner > div { width: 2px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime32x128-aqua32x128.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime32x128-aqua32x128.html new file mode 100644 index 0000000000..089f23b574 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime32x128-aqua32x128.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime32x128-aqua32x128.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 32px; height: 256px; +} +#inner > div { width: 32px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime48x384-aqua48x384.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime48x384-aqua48x384.html new file mode 100644 index 0000000000..2153798ff6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime48x384-aqua48x384.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 48x384 lime, 48x384 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 48px; height: 768px; +} +#inner > div { width: 48px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime4x16-aqua4x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime4x16-aqua4x16.html new file mode 100644 index 0000000000..52475fb70a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime4x16-aqua4x16.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime4x16-aqua4x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 4px; height: 32px; +} +#inner > div { width: 4px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime8x16-aqua8x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime8x16-aqua8x16.html new file mode 100644 index 0000000000..2275861a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime8x16-aqua8x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 8x16 lime, 8x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 32px; +} +#inner > div { width: 8px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime8x32-aqua8x32.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime8x32-aqua8x32.html new file mode 100644 index 0000000000..fa3541abdd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-tall-lime8x32-aqua8x32.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-tall-lime8x32-aqua8x32.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 64px; +} +#inner > div { width: 8px; height: 32px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-empty.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-empty.html new file mode 100644 index 0000000000..9326e90418 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-empty.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-empty.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; + border: 1px solid black; +} + </style> +</head> +<body> +<div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime.html new file mode 100644 index 0000000000..d8123d7756 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime.html @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background: lime; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x128-aqua12x128.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x128-aqua12x128.html new file mode 100644 index 0000000000..badb069750 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x128-aqua12x128.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime12x128-aqua12x128.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 256px; +} +#inner > div { width: 12px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x16-aqua12x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x16-aqua12x16.html new file mode 100644 index 0000000000..4f6a6cb8fd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x16-aqua12x16.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime12x16-aqua12x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 32px; +} +#inner > div { width: 12px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x24-aqua12x24.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x24-aqua12x24.html new file mode 100644 index 0000000000..69fea7371e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x24-aqua12x24.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime12x24-aqua12x24.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 48px; +} +#inner > div { width: 12px; height: 24px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x96-aqua12x96.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x96-aqua12x96.html new file mode 100644 index 0000000000..ee81bbe79a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime12x96-aqua12x96.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime12x96-aqua12x96.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 192px; +} +#inner > div { width: 12px; height: 96px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime16x128-aqua16x128.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime16x128-aqua16x128.html new file mode 100644 index 0000000000..98cb7f1c9c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime16x128-aqua16x128.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime16x128-aqua16x128.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 16px; height: 256px; +} +#inner > div { width: 16px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime2x16-aqua2x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime2x16-aqua2x16.html new file mode 100644 index 0000000000..b11055706f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime2x16-aqua2x16.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime2x16-aqua2x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 2px; height: 32px; +} +#inner > div { width: 2px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime64x128-aqua64x128.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime64x128-aqua64x128.html new file mode 100644 index 0000000000..d8e1097128 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime64x128-aqua64x128.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime64x128-aqua64x128.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 64px; height: 256px; +} +#inner > div { width: 64px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x128-aqua768x128.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x128-aqua768x128.html new file mode 100644 index 0000000000..f6d5fd2af1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x128-aqua768x128.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime768x128-aqua768x128.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 768px; height: 256px; +} +#inner > div { width: 768px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x16-aqua768x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x16-aqua768x16.html new file mode 100644 index 0000000000..8c5a6f3004 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x16-aqua768x16.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime768x16-aqua768x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 768px; height: 32px; +} +#inner > div { width: 768px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x256.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x256.html new file mode 100644 index 0000000000..533122af69 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime768x256.html @@ -0,0 +1,40 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime768x256.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 768px; height: 256px; + background-color: lime; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x128-aqua8x128.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x128-aqua8x128.html new file mode 100644 index 0000000000..9e765260ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x128-aqua8x128.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime8x128-aqua8x128.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 256px; +} +#inner > div { width: 8px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x16-aqua8x16.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x16-aqua8x16.html new file mode 100644 index 0000000000..68ea147219 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x16-aqua8x16.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime8x16-aqua8x16.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 32px; +} +#inner > div { width: 8px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x64-aqua8x64.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x64-aqua8x64.html new file mode 100644 index 0000000000..870bc1bf2c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/reference/ref-wide-lime8x64-aqua8x64.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this reference file was + ref-wide-lime8x64-aqua8x64.html + --> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 128px; +} +#inner > div { width: 8px; height: 64px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/diagonal-scaled-fixed.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/diagonal-scaled-fixed.svg new file mode 100644 index 0000000000..bf0dcfb59b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/diagonal-scaled-fixed.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="700px"> + <title>Vector image with intrinsic dimensions, reference for diagonal-scaled.svg</title> + <rect y="0" width="100px" height="350px" fill="lime"/> + <rect y="350px" width="100px" height="350px" fill="aqua"/> + <rect y="175px" width="50px" height="350px" fill="fuchsia"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/diagonal-scaled.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/diagonal-scaled.svg new file mode 100644 index 0000000000..391a9abe84 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/diagonal-scaled.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> + <!-- + A percent stroke-width is resolved with respect to: + + d = sqrt(vh**2 + vw**2) / sqrt(2) + + where vh/vw are the image viewport width/height. Because this image has no + intrinsic dimensions or ratio, it expands to fill the entire background + positioning area, so its width is 100px and its height is 700px. For those + carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide + rectangle, vertically centered and horizontally left-aligned in the image. + --> + <line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-no-dimensions.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-no-dimensions.svg new file mode 100644 index 0000000000..e116d8f1f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-no-dimensions.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 8 0" + preserveAspectRatio="none"> + <title>Image with zero-width ratio, no dimensions</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-zero-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-zero-height.svg new file mode 100644 index 0000000000..e691e3f918 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-zero-height.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 8 0" + preserveAspectRatio="none"> + <title>Image with zero-height ratio, width</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-zero-width.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-zero-width.svg new file mode 100644 index 0000000000..df36531671 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/intrinsic-ratio-zero-width.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 0 8" + preserveAspectRatio="none"> + <title>Image with zero-width ratio, width</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-nonpercent-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-nonpercent-height-viewbox.svg new file mode 100644 index 0000000000..9014ad5bf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-nonpercent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="32px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with non-percent width, non-percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-nonpercent-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-nonpercent-height.svg new file mode 100644 index 0000000000..60f9e724e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-nonpercent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="32px"> + <title>Image with non-percentage dimensions</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height-extreme-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height-extreme-viewbox.svg new file mode 100644 index 0000000000..052ed2ab39 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height-extreme-viewbox.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 2147483647 1" + preserveAspectRatio="none"> + <title>Image with non-percent width, omitted height, extreme viewbox</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height-viewbox.svg new file mode 100644 index 0000000000..8c794b6139 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with non-percent width, omitted height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height.svg new file mode 100644 index 0000000000..b506e625db --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-omitted-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px"> + <title>Image with non-percent width, omitted height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-percent-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-percent-height-viewbox.svg new file mode 100644 index 0000000000..3a114ccc54 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-percent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with non-percent width, percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-percent-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-percent-height.svg new file mode 100644 index 0000000000..398291e3b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/nonpercent-width-percent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="50%"> + <title>Image with non-percent width, percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height-extreme-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height-extreme-viewbox.svg new file mode 100644 index 0000000000..9e9b0b431a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height-extreme-viewbox.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="8px" + viewBox="0 0 1 2147483647" + preserveAspectRatio="none"> + <title>Image with omitted width, non-percent height, extreme viewbox</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height-viewbox.svg new file mode 100644 index 0000000000..ebf4d94ec4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="32px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with omitted width, non-percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height.svg new file mode 100644 index 0000000000..b6985ad010 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-nonpercent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="32px"> + <title>Image with omitted width, non-percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-omitted-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-omitted-height-viewbox.svg new file mode 100644 index 0000000000..bcea95cdc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-omitted-height-viewbox.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with omitted width, omitted height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-omitted-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-omitted-height.svg new file mode 100644 index 0000000000..d086213878 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-omitted-height.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Image with omitted width, omitted height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-percent-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-percent-height-viewbox.svg new file mode 100644 index 0000000000..265c26a9a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-percent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with omitted width, percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-percent-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-percent-height.svg new file mode 100644 index 0000000000..b44560175d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/omitted-width-percent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="50%"> + <title>Image with omitted width, percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-nonpercent-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-nonpercent-height-viewbox.svg new file mode 100644 index 0000000000..645c4c0244 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-nonpercent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%" height="32px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with percent width, non-percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-nonpercent-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-nonpercent-height.svg new file mode 100644 index 0000000000..e733115019 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-nonpercent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%" height="32px"> + <title>Image with percent width, non-percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-omitted-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-omitted-height-viewbox.svg new file mode 100644 index 0000000000..ef0a467678 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-omitted-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with percent width, omitted height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-omitted-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-omitted-height.svg new file mode 100644 index 0000000000..76e9cef3c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-omitted-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%"> + <title>Image with percent width, omitted height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-percent-height-viewbox.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-percent-height-viewbox.svg new file mode 100644 index 0000000000..be23fe2d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-percent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="25%" height="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with percent width, percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-percent-height.svg b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-percent-height.svg new file mode 100644 index 0000000000..db197fb304 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/support/percent-width-percent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="25%" height="50%"> + <title>Image with percent width, percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--omitted-width-percent-height.html new file mode 100644 index 0000000000..94f14411f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--omitted-width-percent-height.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..43b7e0b7ef --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..fd719d1fce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x16-aqua256x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..bf43fccd74 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-omitted-height.html new file mode 100644 index 0000000000..89167b9efb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..63882f5e35 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-percent-height.html new file mode 100644 index 0000000000..00a3828c3d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..3bf5b67835 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..d5a02c3e38 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..c68a854ca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..5b02781c94 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..c752411e2a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..4e1eeb57ee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..ad202bbb1e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..33963726d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x16-aqua256x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..cd92658b0c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-omitted-height.html new file mode 100644 index 0000000000..2a1dc95b1a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x16-aqua256x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..8eb47bc980 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-percent-height.html new file mode 100644 index 0000000000..8e30113a7c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x16-aqua256x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..0f18f0add8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..770ed704c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x16-aqua256x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..8d2ad03a9b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-omitted-height.html new file mode 100644 index 0000000000..f6a416d96e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x16-aqua256x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..a9b456bab1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-percent-height.html new file mode 100644 index 0000000000..b0d8bc732c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--auto-32px--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -auto-32px- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x16-aqua256x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--height.html new file mode 100644 index 0000000000..e0438d12c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--height.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..6d3fefbadd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime192x384-aqua192x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..3ee231236a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime192x384-aqua192x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..b65bd2aa7c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..2d321a3f55 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..7ee57a464e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..26faea698d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..24ee84cec6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..7fd0ec9716 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..750263d01d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-omitted-height.html new file mode 100644 index 0000000000..fe1f9d870e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..8996c10785 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-percent-height.html new file mode 100644 index 0000000000..c76f78a172 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..b8772a8a6a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..ab813d82aa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..6a070da5ea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-omitted-height.html new file mode 100644 index 0000000000..bc4fcecc16 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..1c8d4e0c22 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime48x384-aqua48x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-percent-height.html new file mode 100644 index 0000000000..9255929790 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--width.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--width.html new file mode 100644 index 0000000000..434d17f21b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--contain--width.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -contain- -width.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--height.html new file mode 100644 index 0000000000..1994e969d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--height.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html new file mode 100644 index 0000000000..93f6b94e6e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-nonpercent-height--crisp.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x512-aqua256x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + image-rendering: -moz-crisp-edges; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html new file mode 100644 index 0000000000..4880899870 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html @@ -0,0 +1,48 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-nonpercent-height-viewbox--crisp.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x512-aqua256x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + image-rendering: -moz-crisp-edges; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..1f54f44724 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,48 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x512-aqua256x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + /* XXX image-rendering: -moz-crisp-edges; */ + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..eae4b2288a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-nonpercent-height.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x512-aqua256x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + /* XXX image-rendering: -moz-crisp-edges; */ + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..7179f71c7c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..57a039221b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..45bac2aa71 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..74777df0b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..723c5a7340 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..135cd19c28 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..e0e71ca198 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-omitted-height.html new file mode 100644 index 0000000000..6cc860ccaa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..f63cfa2e9a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-percent-height.html new file mode 100644 index 0000000000..148dd019e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..8beff44802 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..4d2a5abca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..8327191648 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-omitted-height.html new file mode 100644 index 0000000000..72ff0f4ee9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..7bd2bb01e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime256x768.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-percent-height.html new file mode 100644 index 0000000000..02c6861a56 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-lime256x384-aqua256x384.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--width.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--width.html new file mode 100644 index 0000000000..26ff0ddfbb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/tall--cover--width.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + tall- -cover- -width.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-tall-lime.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..28c1344250 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x24-aqua12x24.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..9bac184a06 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x24-aqua12x24.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..fe2943e08b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..76284feb92 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x128-aqua12x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..c35f86538b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..e4dea86a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x128-aqua12x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..b6568cea44 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..73cd14dc88 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x16-aqua12x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..f104b96473 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-omitted-height.html new file mode 100644 index 0000000000..58879b8303 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x128-aqua12x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..81f74f7ae3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-percent-height.html new file mode 100644 index 0000000000..1c2a634247 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x128-aqua12x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..a926a9fa6b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..1a66abff42 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x16-aqua12x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..6906243e98 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-omitted-height.html new file mode 100644 index 0000000000..64966a724e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x128-aqua12x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..6db73b4981 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime12x96-aqua12x96.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-percent-height.html new file mode 100644 index 0000000000..d1dfaa4cad --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--12px-auto--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -12px-auto- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: 12px auto; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime12x128-aqua12x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: 12px auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..bb399358f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..7363a03961 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..e207e2fd88 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime8x64-aqua8x64.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..d48cc1008b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime8x128-aqua8x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..c4405c2cd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime8x64-aqua8x64.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..2860507a31 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime8x128-aqua8x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..0eac7d95e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..60577d96f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..521401033e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-omitted-height.html new file mode 100644 index 0000000000..59d7f74f8e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..f3c0e84da3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-percent-height.html new file mode 100644 index 0000000000..de567dc43b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..13b27bc650 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..7e63b29dbf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..ed3ef1d458 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-omitted-height.html new file mode 100644 index 0000000000..c9977ffbed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..6f9037d769 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-percent-height.html new file mode 100644 index 0000000000..a54798382b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..4049c5895a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..f66e430ee6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..07422dfdb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..accc46d6e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..b0ef747682 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..f9978688a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime8x16-aqua8x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..a564723781 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..688dc5b3f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..0e8b934a2d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-omitted-height.html new file mode 100644 index 0000000000..b43366bbc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..95cda27670 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-percent-height.html new file mode 100644 index 0000000000..8622f7394f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..ea6ecc2308 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..62e9946715 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..f8d8192098 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-omitted-height.html new file mode 100644 index 0000000000..bce840674f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..90c1f23fa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime2x16-aqua2x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-percent-height.html new file mode 100644 index 0000000000..c02f00b42c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--auto-32px--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -auto-32px- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: auto 32px; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x16-aqua768x16.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: auto 32px; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--height.html new file mode 100644 index 0000000000..615c55c2f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--height.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..10099c6759 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime64x128-aqua64x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..53ce32a42c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime64x128-aqua64x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..dd6c0eb255 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..c934a7f056 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..a1d1bb6bf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..01712da257 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..c6d24d1e44 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..caf4e49290 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..519a6d37d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-omitted-height.html new file mode 100644 index 0000000000..a0f054c300 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..52fa99c09d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-percent-height.html new file mode 100644 index 0000000000..aa6baca06e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..de0c750645 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..e9209b78b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..612a311f28 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-omitted-height.html new file mode 100644 index 0000000000..9fe315cd40 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..9e2653c958 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime16x128-aqua16x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-percent-height.html new file mode 100644 index 0000000000..94c020834f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--width.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--width.html new file mode 100644 index 0000000000..abc9ffef59 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--contain--width.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -contain- -width.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--height.html new file mode 100644 index 0000000000..56550a5f84 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--height.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..09f6319f1d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -nonpercent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..e7fbc375ab --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -nonpercent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..5c24bdffcb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -nonpercent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..48373ca9bf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -nonpercent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..64becf4a81 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -nonpercent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..6ec016ec28 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--nonpercent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -nonpercent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for nonpercent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/nonpercent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..948f5e9455 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -omitted-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..1000b79064 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -omitted-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..fe4b9ca9b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -omitted-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-omitted-height.html new file mode 100644 index 0000000000..656ed819dc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -omitted-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..8bb52f9fa6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -omitted-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-percent-height.html new file mode 100644 index 0000000000..2f26a9b105 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--omitted-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -omitted-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-nonpercent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..f5e84e69a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -percent-width-nonpercent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-nonpercent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..409f2fa76e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-nonpercent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -percent-width-nonpercent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-nonpercent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-nonpercent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-omitted-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..31133bb6f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-omitted-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -percent-width-omitted-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-omitted-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-omitted-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-omitted-height.html new file mode 100644 index 0000000000..d17c1d163b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-omitted-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -percent-width-omitted-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-omitted-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-omitted-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-percent-height-viewbox.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..d0fc8ea497 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-percent-height-viewbox.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -percent-width-percent-height-viewbox.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-percent-height-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime768x256.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-percent-height.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-percent-height.html new file mode 100644 index 0000000000..bd82412f99 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--percent-width-percent-height.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -percent-width-percent-height.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for percent-width-percent-height.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-wide-lime768x128-aqua768x128.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/percent-width-percent-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--width.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--width.html new file mode 100644 index 0000000000..ec6aa87fe0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/wide--cover--width.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + wide- -cover- -width.html + --> + + <title>CSS Backgrounds and Borders Test: background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="reference/ref-wide-lime.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/omitted-width-nonpercent-height-extreme-viewbox.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 256px; + width: 768px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-5px-auto.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-5px-auto.html new file mode 100644 index 0000000000..dccf55e6fe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-5px-auto.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-height-ratio-5px-auto.html + --> + + <title>CSS Backgrounds and Borders Test: zero height ratio, 5px auto</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-height.svg"); + background-repeat: no-repeat; + background-size: 5px auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-auto-5px.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-auto-5px.html new file mode 100644 index 0000000000..7fddc6d43d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-auto-5px.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-height-ratio-auto-5px.html + --> + + <title>CSS Backgrounds and Borders Test: zero height ratio, auto 5px</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-height.svg"); + background-repeat: no-repeat; + background-size: auto 5px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-auto-auto.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-auto-auto.html new file mode 100644 index 0000000000..3e62569dc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-auto-auto.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-height-ratio-auto-auto.html + --> + + <title>CSS Backgrounds and Borders Test: zero height ratio, auto auto</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-height.svg"); + background-repeat: no-repeat; + background-size: auto auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-contain.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-contain.html new file mode 100644 index 0000000000..32b246fb36 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-contain.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-height-ratio-contain.html + --> + + <title>CSS Backgrounds and Borders Test: zero height ratio, contain</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-height.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-cover.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-cover.html new file mode 100644 index 0000000000..c4847c398b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-height-ratio-cover.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-height-ratio-cover.html + --> + + <title>CSS Backgrounds and Borders Test: zero height ratio, cover</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-height.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-5px-auto.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-5px-auto.html new file mode 100644 index 0000000000..28d44ea51a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-5px-auto.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-ratio-no-dimensions-5px-auto.html + --> + + <title>CSS Backgrounds and Borders Test: zero ratio, no dimensions, 5px auto</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-no-dimensions.svg"); + background-repeat: no-repeat; + background-size: 5px auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-auto-5px.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-auto-5px.html new file mode 100644 index 0000000000..a830722b83 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-auto-5px.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-ratio-no-dimensions-auto-5px.html + --> + + <title>CSS Backgrounds and Borders Test: zero ratio, no dimensions, auto 5px</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-no-dimensions.svg"); + background-repeat: no-repeat; + background-size: auto 5px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-auto-auto.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-auto-auto.html new file mode 100644 index 0000000000..a3eefc90a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-auto-auto.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-ratio-no-dimensions-auto-auto.html + --> + + <title>CSS Backgrounds and Borders Test: zero ratio, no dimensions, auto auto</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-no-dimensions.svg"); + background-repeat: no-repeat; + background-size: auto auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-contain.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-contain.html new file mode 100644 index 0000000000..89f644349c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-contain.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-ratio-no-dimensions-contain.html + --> + + <title>CSS Backgrounds and Borders Test: zero ratio, no dimensions, contain</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-no-dimensions.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-cover.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-cover.html new file mode 100644 index 0000000000..e5ffa3a9af --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-ratio-no-dimensions-cover.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-ratio-no-dimensions-cover.html + --> + + <title>CSS Backgrounds and Borders Test: zero ratio, no dimensions, cover</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-no-dimensions.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-5px-auto.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-5px-auto.html new file mode 100644 index 0000000000..7a0d687ace --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-5px-auto.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-width-ratio-5px-auto.html + --> + + <title>CSS Backgrounds and Borders Test: zero height ratio, 5px auto</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-width.svg"); + background-repeat: no-repeat; + background-size: 5px auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-auto-5px.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-auto-5px.html new file mode 100644 index 0000000000..4a7d22f552 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-auto-5px.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-width-ratio-auto-5px.html + --> + + <title>CSS Backgrounds and Borders Test: zero height ratio, auto 5px</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-width.svg"); + background-repeat: no-repeat; + background-size: auto 5px; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-auto-auto.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-auto-auto.html new file mode 100644 index 0000000000..1e1ba84ef5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-auto-auto.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-width-ratio-auto-auto.html + --> + + <title>CSS Backgrounds and Borders Test: zero width ratio, auto auto</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-width.svg"); + background-repeat: no-repeat; + background-size: auto auto; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-contain.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-contain.html new file mode 100644 index 0000000000..b884d95a42 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-contain.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-width-ratio-contain.html + --> + + <title>CSS Backgrounds and Borders Test: zero width ratio, contain</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-width.svg"); + background-repeat: no-repeat; + background-size: contain; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-cover.html b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-cover.html new file mode 100644 index 0000000000..d762853946 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-size/vector/zero-width-ratio-cover.html @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<!DOCTYPE html> + +<html> + + <head> + + <!-- + The original and initial filename of this test was + zero-width-ratio-cover.html + --> + + <title>CSS Backgrounds and Borders Test: zero width ratio, cover</title> + + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"> + <link rel="match" href="reference/ref-tall-empty.html"> + + <meta name="flags" content="svg"> + + <style type="text/css"> + div + { + background-image: url("support/intrinsic-ratio-zero-width.svg"); + background-repeat: no-repeat; + background-size: cover; + border: black solid 1px; + height: 768px; + width: 256px; + } + </style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background_color_padding_box.htm b/testing/web-platform/tests/css/css-backgrounds/background_color_padding_box.htm new file mode 100644 index 0000000000..c8372fa376 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background_color_padding_box.htm @@ -0,0 +1,34 @@ +<!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 Test: Background color clipped to 'padding-box'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-color" /> + <meta name="assert" content="Background color is clipped according to the 'background-clip' value associated with the bottom-most background image." /> + <style type="text/css"> + div div + { + width: 250px; + height: 250px; + border: 10px dashed purple; + padding: 10px; + background-image: url("support/blue_color.png"), url("support/orange_color.png"), url("support/white_color.png"); + background-repeat: no-repeat; + background-clip: border-box, border-box, padding-box; + background-position: 30px 30px, 60px 60px, 90px 90px; + background-color: black; + } + #parent + { + width: 290px; + background: green; + } + </style> + </head> + <body> + <p>Test passes if green is visible on the page.</p> + <div id="parent"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background_properties_greater_than_images.htm b/testing/web-platform/tests/css/css-backgrounds/background_properties_greater_than_images.htm new file mode 100644 index 0000000000..3fde022cb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background_properties_greater_than_images.htm @@ -0,0 +1,43 @@ +<!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 Test: Number of background properties greater than number of background images</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#layering" /> + <meta name="assert" content="If the background properties values are greater than the number of background images, then the excess values are ignored." /> + <style type="text/css"> + div + { + margin: 10px; + width: 250px; + height: 250px; + border: thick solid black; + } + #test + { + background-image: url("support/aqua_color.png"), url("support/orange_color.png"), url("support/green_color.png"); + background-position: right bottom, right top, left bottom, left center, right center; + background-repeat: no-repeat, no-repeat, repeat-x, repeat, repeat-y; + } + #reference + { + background-image: url("support/aqua_color.png"), url("support/orange_color.png"), url("support/green_color.png"); + background-position: right bottom, right top, left bottom; + background-repeat: no-repeat, no-repeat, repeat-x; + } + </style> + </head> + <body> + <p>Test passes if there is green on the page and contents of the black boxes look exactly the same.</p> + <table> + <tr> + <td> + <div id="test"></div> + </td> + <td> + <div id="reference"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background_repeat_space_border_box.htm b/testing/web-platform/tests/css/css-backgrounds/background_repeat_space_border_box.htm new file mode 100644 index 0000000000..167c69943a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background_repeat_space_border_box.htm @@ -0,0 +1,26 @@ +<!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 Test: 'Background-repeat: space' when background positioning area is 'border-box'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="assert" content="When 'background-repeat: space' and background positioning area is set to 'border-box' the image is repeated as often within the 'border-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'border-box'." /> + <style type="text/css"> + div + { + width: 2.9in; + height: 2.9in; + padding: 25px; + border: 25px double black; + background-origin: border-box; + background-image: url("support/green_color.png"), url("../support/space_border_box.png"); + background-repeat: no-repeat; + background-repeat: space, no-repeat; + } + </style> + </head> + <body> + <p>Test passes if green is visible on the page and there is no red is visible on the page.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background_repeat_space_content_box.htm b/testing/web-platform/tests/css/css-backgrounds/background_repeat_space_content_box.htm new file mode 100644 index 0000000000..b87bb9c287 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background_repeat_space_content_box.htm @@ -0,0 +1,25 @@ +<!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 Test: 'Background-repeat: space' when background positioning area is 'content-box'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" /> + <meta name="assert" content="When 'background-repeat: space' and background positioning area is set to 'content-box' the image is repeated as often within the 'content-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'content-box'." /> + <style type="text/css"> + div + { + width: 2.9in; + height: 2.9in; + padding: 25px; + border: 25px double black; + background-origin: content-box; + background-image: url("../support/cat.png"); + background-repeat: space; + } + </style> + </head> + <body> + <p>Test passes if there are four unclipped cats below, if the cats are equally spaced from each other, and if the cats do not touch or overlap the double border.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/bg-color-with-gradient-ref.html b/testing/web-platform/tests/css/css-backgrounds/bg-color-with-gradient-ref.html new file mode 100644 index 0000000000..5c76f3408a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/bg-color-with-gradient-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + var grad = ctx.createLinearGradient(0, 0, 0, 100); + grad.addColorStop(0, 'red'); + grad.addColorStop(1, 'black'); + ctx.fillStyle = grad; + ctx.fillRect(0, 0, 100, 100); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/bg-color-with-gradient.html b/testing/web-platform/tests/css/css-backgrounds/bg-color-with-gradient.html new file mode 100644 index 0000000000..be08fa5800 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/bg-color-with-gradient.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="bg-color-with-gradient-ref.html"> +<meta name="fuzzy" content="maxDifference=0-3; totalPixels=0-6909" /> +<div style="width: 100px; height: 100px; background: linear-gradient(red, black); background-color: green;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-001.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-001.xht new file mode 100644 index 0000000000..25bfd041d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-001.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-left-radius using 0 value</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify the border-bottom-left-radius property, when set with 0, works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-left-radius: 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-002.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-002.xht new file mode 100644 index 0000000000..f84a3c6ef9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-002.xht @@ -0,0 +1,62 @@ +<!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 Test: Borders. Border-bottom-left-radius using one length value: 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <meta name="assert" content="To verify if border-bottom-left-radius property set to one length value, works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-bottom-left-radius: 25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be a box with a rounded bottom left corner. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if only bottom left corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + + <div id="test"></div> + <p><br/></p> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "25px"; + + var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-004-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-004-ref.xht new file mode 100644 index 0000000000..15732f1c06 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-004-ref.xht @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-left-radius: 48px 28px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-left-radius: 48px 28px; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-left-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-004.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-004.xht new file mode 100644 index 0000000000..ed444bfabe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-004.xht @@ -0,0 +1,26 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-left-radius using one percentage</title> + <link rel="match" href="border-bottom-left-radius-004-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-left-radius: 20%; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-left-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-005-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-005-ref.xht new file mode 100644 index 0000000000..26621b9a75 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-005-ref.xht @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-left-radius: 48px 14px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-left-radius: 48px 14px; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-left-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-005.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-005.xht new file mode 100644 index 0000000000..bceaa3d9e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-005.xht @@ -0,0 +1,25 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-left-radius using two percentages</title> + <link rel="match" href="border-bottom-left-radius-005-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-1" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-left-radius: 20% 10%; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-left-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-010.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-010.xht new file mode 100644 index 0000000000..9a4c0ecf76 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-010.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-left-radius using one length value: 25px 0</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-left-radius: 25px 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-011.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-011.xht new file mode 100644 index 0000000000..3f01535efe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-011.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-left-radius using one length value: 0 3em</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-left-radius: 0 3em; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-012.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-012.xht new file mode 100644 index 0000000000..9d837d23fe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-012.xht @@ -0,0 +1,61 @@ +<!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 Test: Borders. Border-bottom-left-radius using two length values: 0.5in 10mm</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <meta name="assert" content="To verify border-bottom-left-radius property set to two length values (with diferent units), works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-bottom-left-radius: 0.5in 10mm; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be a box with a rounded bottom left corner. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if only bottom left corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "48px 37px"; + + var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-013.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-013.xht new file mode 100644 index 0000000000..92bbbde662 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-013.xht @@ -0,0 +1,61 @@ +<!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 Test: Borders. Border-bottom-left-radius using two length values: 40pt 2pc</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <meta name="assert" content="To verify border-bottom-left-radius property set to two length values (with different units), works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-bottom-left-radius: 40pt 2pc; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be a box with a rounded bottom left corner. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if only bottom left corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "53px 32px"; + + var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-014.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-014.xht new file mode 100644 index 0000000000..dd2ba26631 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-left-radius-014.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-left-radius using two length values: 50px -25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if one length value is negative in border-bottom-left-radius, then the corner is not rounded."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-left-radius: 50px -25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-001.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-001.xht new file mode 100644 index 0000000000..66ec3ed117 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-001.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-right-radius using 0 value</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify border-bottom-right-radius property, when set with 0, works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-right-radius: 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-002.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-002.xht new file mode 100644 index 0000000000..4dc3236e60 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-002.xht @@ -0,0 +1,61 @@ +<!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 Test: Borders. Border-bottom-right-radius using one length value: 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <meta name="assert" content="To verify border-bottom-right-radius property set with one length value, works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-bottom-right-radius: 25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be a box with a rounded bottom right corner. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if only bottom right corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "25px"; + + var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-004-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-004-ref.xht new file mode 100644 index 0000000000..8589ee96b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-004-ref.xht @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-right-radius: 48px 28px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-right-radius: 48px 28px; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-right-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-004.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-004.xht new file mode 100644 index 0000000000..2af4de7bfe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-004.xht @@ -0,0 +1,26 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-right-radius using one percentage</title> + <link rel="match" href="border-bottom-right-radius-004-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=0-73; totalPixels=0-127" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-right-radius: 20%; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-right-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-005-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-005-ref.xht new file mode 100644 index 0000000000..9ed21b7222 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-005-ref.xht @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-right-radius: 48px 14px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-right-radius: 48px 14px; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-right-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-005.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-005.xht new file mode 100644 index 0000000000..f53ae0d92f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-005.xht @@ -0,0 +1,25 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-bottom-right-radius using two percentages</title> + <link rel="match" href="border-bottom-right-radius-005-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=0-36; totalPixels=0-131" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-bottom-right-radius: 20% 10%; + } + </style> + </head> + <body> + <p>The box should have a border-bottom-right-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-010.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-010.xht new file mode 100644 index 0000000000..7d7261eced --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-010.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-right-radius using one length value: 25px 0</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify border-bottom-right-radius property set with one length value, works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-right-radius: 25px 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-011.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-011.xht new file mode 100644 index 0000000000..9ad97820ec --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-011.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-right-radius using one length value: 0 3em</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify border-bottom-right-radius property set with one length value, works as expected"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-right-radius: 0 3em; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-012.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-012.xht new file mode 100644 index 0000000000..9aff2e9da3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-012.xht @@ -0,0 +1,61 @@ +<!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 Test: Borders. Border-bottom-right-radius using two length values: 0.5in 10mm</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <meta name="assert" content="To verify border-bottom-right-radius property set with two values (with different units), works as expected" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-bottom-right-radius: 0.5in 10mm; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be a box with a rounded bottom right corner. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if only bottom right corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "48px 37px"; + + var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-013.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-013.xht new file mode 100644 index 0000000000..19f270e79f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-013.xht @@ -0,0 +1,61 @@ +<!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 Test: Borders. Border-bottom-right-radius using two length values: 40pt 2pc</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <meta name="assert" content="To verify border-bottom-right-radius property set with two values (with different units), works fine" /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-bottom-right-radius: 40pt 2pc; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be a box with a rounded bottom right corner. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if only bottom right corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "53px 32px"; + + var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-014.xht b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-014.xht new file mode 100644 index 0000000000..0a2eec7440 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-right-radius-014.xht @@ -0,0 +1,66 @@ +<!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 Test: Borders. Border-bottom-right-radius using two length values: 50px -25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded." /> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-bottom-right-radius: 50px -25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius); + + // if (testResult.pass) + /* This portion of the code has been removed to ensure that the test case is not automated */ + // else + /* This portion of the code has been removed to ensure that the test case is not automated */ + + + + if (top.FrameEnabled) top.fnLog(testResult); + + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-medium.html b/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-medium.html new file mode 100644 index 0000000000..ab0d9b8aff --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-medium.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-bottom-width: medium equals 3px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-top-width-3px-ref.html"> +<meta name="assert" content="The 'medium' keyword for 'border-bottom-width' is 3px." /> +<style> + .red-if-too-thin { height: 3px; background: red; } + .cb { position: relative; } + .red-if-too-thick { height: 20px; background: red; } + .overlap-red-if-too-thick { height: 20px; background: white; position: absolute; top: 3px; width: 100%; } + .border-test { border-bottom-style: solid; border-bottom-width: medium; margin-top: -3px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div> + <div class=cb> + <div class=border-test></div> + <div class=red-if-too-thick></div> + <div class=overlap-red-if-too-thick></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-thick.html b/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-thick.html new file mode 100644 index 0000000000..91f2c4884c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-thick.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-bottom-width: thick equals 5px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-top-width-5px-ref.html"> +<meta name="assert" content="The 'thick' keyword for 'border-bottom-width' is 5px." /> +<style> + .red-if-too-thin { height: 5px; background: red; } + .cb { position: relative; } + .red-if-too-thick { height: 20px; background: red; } + .overlap-red-if-too-thick { height: 20px; background: white; position: absolute; top: 5px; width: 100%; } + .border-test { border-bottom-style: solid; border-bottom-width: thick; margin-top: -5px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div> + <div class=cb> + <div class=border-test></div> + <div class=red-if-too-thick></div> + <div class=overlap-red-if-too-thick></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-thin.html b/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-thin.html new file mode 100644 index 0000000000..bbc82f4f14 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-bottom-width-thin.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-bottom-width: thin equals 1px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-top-width-1px-ref.html"> +<meta name="assert" content="The 'thin' keyword for 'border-bottom-width' is 1px." /> +<style> + .red-if-too-thin { height: 1px; background: red; } + .cb { position: relative; } + .red-if-too-thick { height: 20px; background: red; } + .overlap-red-if-too-thick { height: 20px; background: white; position: absolute; top: 1px; width: 100%; } + .border-test { border-bottom-style: solid; border-bottom-width: thin; margin-top: -1px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div> + <div class=cb> + <div class=border-test></div> + <div class=red-if-too-thick></div> + <div class=overlap-red-if-too-thick></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-color_transparent.html b/testing/web-platform/tests/css/css-backgrounds/border-color_transparent.html new file mode 100644 index 0000000000..7fcdb2dd94 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-color_transparent.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds and Borders Test: border-clip_border-box</title> + <link rel="author" title="Dong An" href="mailto:andong135@126.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-color"> + <meta name="assert" content="Test transparent of border-color"> + <style type="text/css"> + .container { + border: 1px solid red; + width:100px; + height:100px; + background-color:#eee; + } + .triangle-up { + height: 0; + width: 0; + border: 50px solid #e5c3b2; + border-color: transparent transparent #e5c3b2 transparent; + } + </style> +</head> +<body> +<p>Test passes if the shape is an up triangle </p> + <div class="container"> + <div class="triangle-up"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-002.html b/testing/web-platform/tests/css/css-backgrounds/border-image-002.html new file mode 100644 index 0000000000..ac76eb2a5e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border-image-slice (basic)</title> + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice"> + <link rel="match" href="reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content=""> + + <!-- + + This is a follow-up to + Pull Request 8788: Update css-backgrounds/border-image tests + https://github.com/web-platform-tests/wpt/pull/8788 + + Credit should go to Chris Nardi for trying to fix + 16 border-image tests with 2 relevant commits + + --> + + <style> + div#red-overlapped-ref + { + background-color: red; + height: 100px; + width: 100px; + } + + div#green-overlapping-test + { + border: red solid 40px; + + border-image-slice: 1; + border-image-source: url("support/1pxgreen-98pxred.png"); + } + + div#green-filled-center + { + background-color: green; + height: 20px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="red-overlapped-ref"> + <div id="green-overlapping-test"> + <div id="green-filled-center"></div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-003.html b/testing/web-platform/tests/css/css-backgrounds/border-image-003.html new file mode 100644 index 0000000000..6d4ee0fde9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-003.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border-image-slice with fill keyword (basic)</title> + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice"> + <link rel="match" href="reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content=""> + + <!-- + + This is a follow-up to + Pull Request 8788: Update css-backgrounds/border-image tests + https://github.com/web-platform-tests/wpt/pull/8788 + + Credit should go to Chris Nardi for trying to fix + 16 border-image tests with 2 relevant commits + + --> + + <style> + div#red-overlapped-ref + { + background-color: red; + height: 100px; + width: 100px; + } + + div#green-overlapping-test + { + border: red solid 40px; + height: 20px; + + border-image-slice: 5 fill; + border-image-source: url("support/12x12-green.png"); + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="red-overlapped-ref"> + <div id="green-overlapping-test"></div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-004.html b/testing/web-platform/tests/css/css-backgrounds/border-image-004.html new file mode 100644 index 0000000000..844d98bb3c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-004.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border-image-slice with a percentage unit value (basic)</title> + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice"> + <link rel="match" href="reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content=""> + + <!-- + + This is a follow-up to + Pull Request 8788: Update css-backgrounds/border-image tests + https://github.com/web-platform-tests/wpt/pull/8788 + + Credit should go to Chris Nardi for trying to fix + 16 border-image tests with 2 relevant commits + + --> + + <style> + div#red-overlapped-ref + { + background-color: red; + height: 100px; + width: 100px; + } + + div#green-overlapping-test + { + border: red solid 40px; + + border-image-slice: 1%; + border-image-source: url("support/1pxgreen-98pxred.png"); + } + + div#green-filled-center + { + background-color: green; + height: 20px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="red-overlapped-ref"> + <div id="green-overlapping-test"> + <div id="green-filled-center"></div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-006.html b/testing/web-platform/tests/css/css-backgrounds/border-image-006.html new file mode 100644 index 0000000000..e3782f2ecd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-006.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border-image-slice (basic)</title> + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice"> + <link rel="match" href="reference/border-image-006-ref.html"> + + <meta name="flags" content=""> + + <!-- + + This is a follow-up to + Pull Request 8788: Update css-backgrounds/border-image tests + https://github.com/web-platform-tests/wpt/pull/8788 + + Credit should go to Chris Nardi for trying to fix + 16 border-image tests with 2 relevant commits + + --> + + <style> + div#outer-test + { + border: red solid 25px; + width: 50px; + + border-image-source: url("support/1x1-green.png"); + } + + div#inner-blue + { + border: blue solid 1px; + height: 48px; + } + </style> + + <p>Test passes if there is an hollow blue square with smaller filled green squares at its corners and <strong>no red</strong>. + + <div id="outer-test"> + <div id="inner-blue"></div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-007.html b/testing/web-platform/tests/css/css-backgrounds/border-image-007.html new file mode 100644 index 0000000000..41ac9dac37 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-007.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border-image-width with various values (basic)</title> + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-width"> + <link rel="match" href="reference/border-image-007-ref.html"> + + <meta name="flags" content=""> + + <!-- + + This is a follow-up to + Pull Request 8788: Update css-backgrounds/border-image tests + https://github.com/web-platform-tests/wpt/pull/8788 + + Credit should go to Chris Nardi for trying to fix + 16 border-image tests with 2 relevant commits + + --> + + <style> + div.outer-parent + { + border: red solid 40px; + border-image-slice: 24; + border-image-source: url("support/50x50-green.png"); + height: 12px; + margin-bottom: 16px; + padding: 2px 4px 6px 8px; + width: 8px; + } + + div.inner-child + { + background-color: blue; + height: 100%; + width: 100%; + } + + div#first-subtest + { + border-image-width: 1px; + } + + div#second-subtest + { + border-image-width: 1px 5px; + } + + div#third-subtest + { + border-image-width: 1px 5px 10px; + } + + div#fourth-subtest + { + border-image-width: 1px 5px 10px 15px; + } + </style> + + <div class="outer-parent" id="first-subtest"><div class="inner-child"></div></div> + + <div class="outer-parent" id="second-subtest"><div class="inner-child"></div></div> + + <div class="outer-parent" id="third-subtest"><div class="inner-child"></div></div> + + <div class="outer-parent" id="fourth-subtest"><div class="inner-child"></div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-011.html b/testing/web-platform/tests/css/css-backgrounds/border-image-011.html new file mode 100644 index 0000000000..357845bbf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-011.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border-image-outset (basic)</title> + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-outset"> + <link rel="match" href="reference/ref-filled-green-100px-square.xht"> + + <meta name="flags" content=""> + + <!-- + + This is a follow-up to + Pull Request 8788: Update css-backgrounds/border-image tests + https://github.com/web-platform-tests/wpt/pull/8788 + + Credit should go to Chris Nardi for trying to fix + 16 border-image tests with 2 relevant commits + + --> + + <style> + div#red-overlapped-ref + { + background-color: red; + padding: 24px; + height: 52px; + width: 52px; + /* border-box is therefore 100px by 100px */ + } + + div#green-overlapping-test + { + background-color: green; + border: red solid 1px; + height: 50px; + width: 50px; /* border-box is 52px by 52px */ + + border-image-outset: 24px; /* 24px is equal to padding belt */ + border-image-slice: 25; + border-image-source: url("support/60x60-green.png"); + border-image-width: 25px; /* we make sure that we will fill the outset */ + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="red-overlapped-ref"> + <div id="green-overlapping-test"></div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-012.html b/testing/web-platform/tests/css/css-backgrounds/border-image-012.html new file mode 100644 index 0000000000..16a6e9061d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-012.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border-image-outset property does not trigger scrolling</title> + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-outset"> + <link rel="match" href="reference/border-image-012-ref.html"> + + <meta name="flags" content="scroll"> + + <!-- + + This is a follow-up to + Pull Request 8788: Update css-backgrounds/border-image tests + https://github.com/web-platform-tests/wpt/pull/8788 + + Credit should go to Chris Nardi for trying to fix + 16 border-image tests with 2 relevant commits + + --> + + <style> + div#red-overlapped-ref + { + background-color: red; + width: 100px; + height: 100px; + overflow: auto; + } + + div#green-overlapping-test + { + background-color: green; + border: 1px solid red; + width: 98px; + height: 98px; + /* border-box is therefore 100px by 100px */ + + border-image-source: url("support/60x60-green.png"); + border-image-slice: 10; + border-image-width: 10px; + border-image-outset: 9px; + } + </style> + + <p>Test passes if there is a filled green square and if it has <strong>no scrollbar</strong>. + + <div id="red-overlapped-ref"> + <div id="green-overlapping-test"></div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-013.html b/testing/web-platform/tests/css/css-backgrounds/border-image-013.html new file mode 100644 index 0000000000..c7cc7d54a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-013.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Backgrounds and Borders Test: border-image-repeat: repeat (basic) + </title> + + + <link rel="author" title="Jérémie Patonnier" href="mailto:jeremie@patonnier.net"> + <link rel="match" href="reference/border-image-013-ref.html"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-repeat"> + + <style type="text/css"> + + #test { + border : 10px solid red; + width : 30px; + height : 30px; + + border-image-source: url(support/img-ref-2.png); + border-image-slice : 10; + border-image-repeat: repeat; + } + + </style> + +</head> +<body> + + <p> + Pass if the square has borders made of green dots and <strong>no red</strong>. + </p> + + <div id="test"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-017.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-017.xht new file mode 100644 index 0000000000..33492ca78b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-017.xht @@ -0,0 +1,61 @@ +<!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 Backgrounds and Borders Test: border-image shorthand - with border-image-slice <percentage> and border-image-width <percentage></title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image" title="6.7. Border Image Shorthand: the 'border-image' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red." /> + + <style type="text/css"><![CDATA[ + div#test + { + border-color: red; + border-style: solid; + border-width: 15px 20px 35px 30px; + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat; + + /* + Equivalent to this shorthand form (see border-image-018 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-019 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat; + + or to this shorthand form (see border-image-020 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat; + */ + + width: 50px; + } + + img {vertical-align: top;} + + div#overlapped-red + { + background-color: red; + bottom: 100px; + height: 100px; + position: relative; + width: 100px; + z-index: -1; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled" /></div> + + <div id="overlapped-red"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-018.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-018.xht new file mode 100644 index 0000000000..9ce6c82d56 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-018.xht @@ -0,0 +1,61 @@ +<!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 Backgrounds and Borders Test: border-image shorthand - with border-image-slice <number> and border-image-width <percentage></title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image" title="6.7. Border Image Shorthand: the 'border-image' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="image" /> + <meta name="assert" content="Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red." /> + + <style type="text/css"><![CDATA[ + div#test + { + border-color: red; + border-style: solid; + border-width: 15px 20px 35px 30px; + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat; + + /* + Equivalent to this shorthand form (see border-image-017 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-019 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat; + + or to this shorthand form (see border-image-020 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat; + */ + + width: 50px; + } + + img {vertical-align: top;} + + div#overlapped-red + { + background-color: red; + bottom: 100px; + height: 100px; + position: relative; + width: 100px; + z-index: -1; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled" /></div> + + <div id="overlapped-red"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-019.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-019.xht new file mode 100644 index 0000000000..d07db369ab --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-019.xht @@ -0,0 +1,61 @@ +<!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 Backgrounds and Borders Test: border-image shorthand - with border-image-slice <percentage> and border-image-width <number></title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image" title="6.7. Border Image Shorthand: the 'border-image' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red." /> + + <style type="text/css"><![CDATA[ + div#test + { + border-color: red; + border-style: solid; + border-width: 15px 20px 35px 30px; + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat; + + /* + Equivalent to this shorthand form (see border-image-017 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-018 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-020 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat; + */ + + width: 50px; + } + + img {vertical-align: top;} + + div#overlapped-red + { + background-color: red; + bottom: 100px; + height: 100px; + position: relative; + width: 100px; + z-index: -1; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled" /></div> + + <div id="overlapped-red"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-020.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-020.xht new file mode 100644 index 0000000000..c4fc9ace4a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-020.xht @@ -0,0 +1,61 @@ +<!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 Backgrounds and Borders Test: border-image shorthand - with border-image-slice <number> and border-image-width <number></title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image" title="6.7. Border Image Shorthand: the 'border-image' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="image" /> + <meta name="assert" content="Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red." /> + + <style type="text/css"><![CDATA[ + div#test + { + border-color: red; + border-style: solid; + border-width: 15px 20px 35px 30px; + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat; + + /* + Equivalent to this shorthand form (see border-image-017 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-018 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-019 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat; + */ + + width: 50px; + } + + img {vertical-align: top;} + + div#overlapped-red + { + background-color: red; + bottom: 100px; + height: 100px; + position: relative; + width: 100px; + z-index: -1; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled" /></div> + + <div id="overlapped-red"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-calc-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-calc-ref.html new file mode 100644 index 0000000000..f827ca7fd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-calc-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + #test { + background-color: green; + width: 200px; + height: 200px; + } +</style> +<p>Test passes if there is a green 200px times 200px square.</p> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-calc.html b/testing/web-platform/tests/css/css-backgrounds/border-image-calc.html new file mode 100644 index 0000000000..c8bc4c7c9a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-calc.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>CSS Test: border-image honors calc() lengths / percentages</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzil.la/1517521"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> +<link rel="match" href="border-image-calc-ref.html"> +<style> + #test { + background-color: red; + border: 100px solid red; + border-image-slice: 10; + border-image-source: url("support/green_color.png"); + border-image-width: 100px calc(100px) calc(100%) calc(50% + 50px); + height: 0; + width: 0; + } +</style> +<p>Test passes if there is a green 200px times 200px square.</p> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-displayed-with-transparent-border-color-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-displayed-with-transparent-border-color-ref.html new file mode 100644 index 0000000000..0d02257c6e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-displayed-with-transparent-border-color-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + border-color: transparent should not hide the border-image +</title> +<style> + div { + width: 200px; + height: 200px; + margin: 20px; + background-color: silver; + border-image-source: url('./support/100x100-blue-and-orange.png'); + border-image-slice: 32; + border-image-repeat: repeat; + border-style: solid; + border-width: 32px; + } +</style> + +This box should have a visible blue-orange border-image. +<div></div> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-displayed-with-transparent-border-color.html b/testing/web-platform/tests/css/css-backgrounds/border-image-displayed-with-transparent-border-color.html new file mode 100644 index 0000000000..859dc2f5f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-displayed-with-transparent-border-color.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Tyler Wilcock" href="mailto:twilco.o@protonmail.com"> +<link rel="help" href="https://www.w3.org/TR/2017/CR-css-backgrounds-3-20171017/#border-images"> +<link rel="match" href="border-image-displayed-with-transparent-border-color-ref.html"> +<title> + border-color: transparent should not hide the border-image +</title> +<style> + div { + width: 200px; + height: 200px; + margin: 20px; + background-color: silver; + border-image-source: url('./support/100x100-blue-and-orange.png'); + border-image-slice: 32; + border-image-repeat: repeat; + border-style: solid; + border-width: 32px; + } +</style> + +This box should have a visible blue-orange border-image. +<div style="border-color: transparent;"></div> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-001.htm new file mode 100644 index 0000000000..9486f0b8b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-001.htm @@ -0,0 +1,25 @@ +<!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 Backgrounds and Borders Test: The 'border-image-source' property with an SVG image as a value and the 'border-image-slice' property with four number values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" /> + <link rel="match" href="reference/border-image-image-type-001-ref.html" /> + <meta name="flags" content="svg" /> + <meta name="assert" content="This test checks that the SVG image used for the border image is sliced into nine regions with inward offsets of: '40 30 20 10' vector coordinates from the top, right, bottom, and left edges of the image set by the 'border-image-slice' property." /> + <style type="text/css"> + div + { + border: 50px double red; + border-image-slice: 40 30 20 10; + border-image-source: url("support/9-colored-areas-40-30-20-10.svg"); + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is an hollow square with thick borders made of 8 different colors (yellow, blue, aqua, orange, teal, fuchsia, purple and black) and if there is <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-002.htm new file mode 100644 index 0000000000..f365793e3f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-002.htm @@ -0,0 +1,43 @@ +<!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 Backgrounds and Borders Test: The 'border-image-source' property with an SVG image as a value and the 'border-image-slice' property with percentage values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" /> + <link rel="match" href="reference/border-image-image-type-002-ref.html" /> + <meta name="flags" content="svg" /> + <meta name="assert" content="This test checks that border image is sliced into nine regions with inward offsets of: '40% 30% 20% 10%' from the top, right, bottom, and left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets." /> + <style type="text/css"> + div + { + border: 50px double red; + border-image-slice: 40% 30% 20% 10%; + border-image-source: url("support/9-colored-areas-40-30-20-10.svg"); + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is an hollow square with thick borders made of 8 different colors (yellow, blue, aqua, orange, teal, fuchsia, purple and black) and if there is <strong>no red</strong>.</p> + + <!-- + + Expected result: + + +------------------+ + |yel| blue |aqu| + |- - - - - - - - - | + |or | | t | + | a | | e | + | n | | a | + |ge | | l | + |- - - - - - - - - | + |fuc| purple |bla| + +------------------+ + + --> + + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-003.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-003.htm new file mode 100644 index 0000000000..b5a7543fcb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-003.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: The 'border-image-source' property with a linear gradient as a value</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2020-05-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-source"> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#linear-gradients"> + <link rel="match" href="reference/border-image-image-type-003-ref.html"> + <meta name=fuzzy content="maxDifference=0-3;totalPixels=0-10800"> + <meta name="flags" content="image"> + <meta name="assert" content="This test checks that a linear gradient image type is used instead of the border styles."> + <style> + div + { + border: 20px double red; + border-image-repeat: space; + border-image-slice: 30; + border-image-source: linear-gradient(to top, blue, orange); + border-image-width: auto; + height: 100px; + margin: 10px; + width: 100px; + } + </style> + + <p>Test passes if there is no red visible on the page.</p> + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-004.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-004.htm new file mode 100644 index 0000000000..222267ca63 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-004.htm @@ -0,0 +1,45 @@ +<!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 Backgrounds and Borders Test: The 'border-image-source' property with an SVG image as a value and the 'border-image-slice' property with four number values</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" /> + <link rel="match" href="reference/border-image-image-type-004-ref.html" /> + <meta name="flags" content="svg" /> + <meta name="assert" content="This test checks that the SVG image used for the border image is sliced into nine regions with inward offsets of: '40 30 20 10' vector coordinates from the top, right, bottom, and left edges of the image set by the 'border-image-slice' property." /> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-100" /> + <style type="text/css"> + div + { + border: 50px double red; + border-image-slice: 40 30 20 10; + border-image-source: url("support/9-colored-areas-40-30-20-10.svg"); + height: 0px; + width: 0px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled yellow square, then, on its right-hand side, a contiguous filled aqua square, then, below, a contiguous filled fuchsia square and finally a filled black square and <strong>no red</strong>.</p> + <div></div> + + <!-- + + Expected result: + + (0,100) (50,100) (100,100) + + - - - - - - -+ + | ^ | + |Yellow50 Aqua | + | v | + | - - - - - - -| + | ^ | + |Fuchsi50 Black| + | v | + | - - - - - - -| + (0,0) (100,0) + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-005.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-005.htm new file mode 100644 index 0000000000..cb2668d7dd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-image-type-005.htm @@ -0,0 +1,45 @@ +<!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 Backgrounds and Borders Test: The 'border-image-source' property with an SVG image as a value and the 'border-image-slice' property with percentage values</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" /> + <link rel="match" href="reference/border-image-image-type-004-ref.html" /> + <meta name="flags" content="svg" /> + <meta name="assert" content="This test checks that border image is sliced into nine regions with inward offsets of: '40% 30% 20% 10%' from the top, right, bottom, and left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets." /> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-100" /> + <style type="text/css"> + div + { + border: 50px double red; + border-image-slice: 40% 30% 20% 10%; + border-image-source: url("support/9-colored-areas-40-30-20-10.svg"); + height: 0px; + width: 0px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled yellow square, then, on its right-hand side, a contiguous filled aqua square, then, below, a contiguous filled fuchsia square and finally a filled black square and <strong>no red</strong>.</p> + <div></div> + + <!-- + + Expected result: + + (0,100) (50,100) (100,100) + + - - - - - - -+ + | ^ | + |Yellow50 Aqua | + | v | + | - - - - - - -| + | ^ | + |Fuchsi50 Black| + | v | + | - - - - - - -| + (0,0) (100,0) + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-outset-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-001.htm new file mode 100644 index 0000000000..db0a8f5f6b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-001.htm @@ -0,0 +1,37 @@ +<!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 Test: The 'border-image-outset' property set to four number values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-outset" /> + <meta name="flags" content="image" /> + <meta name="assert" content="This test checks that the four values of the 'border-image-outset' property specify the amount by which the border image area extends beyond the border box. They set the outsets on the top, right, bottom and left sides in that order. A 'number' represents a multiple of the corresponding border-width." /> + <style type="text/css"> + #test + { + background-color: blue; + border: 10px double red; + border-image-outset: 1 6 11 1; + border-image-slice: 10; + border-image-source: url("support/green_color.png"); + border-image-width: 1; + height: 90px; + margin: 70px; + width: 40px; + } + #reference + { + background-color: orange; + height: 100px; + margin: 100px 50px; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if orange rectangle touches green border by 2 sides and it's top left corner touches the bottom right corner of the blue rectangle.</p> + <div id="test"> + <div id="reference"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-outset-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-002.htm new file mode 100644 index 0000000000..d8fbf944b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-002.htm @@ -0,0 +1,45 @@ +<!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 Test: The 'border-image-outset' property set to one value using 'em' units</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-outset" /> + <meta name="flags" content="image" /> + <meta name="assert" content="This test checks that if the outset values of right, bottom and left sides are not explicitly individually specified, the single value is then used for all four sides." /> + <style type="text/css"> + #test + { + background-color: blue; + border: 1em double red; + border-image-outset: 3em; + border-image-slice: 10; + border-image-source: url("support/green_color.png"); + border-image-width: 1; + height: 6em; + margin: 4em; + width: 6em; + } + #reference1 + { + background-color: orange; + height: 2em; + margin: -3em; + width: 2em; + } + #reference2 + { + background-color: orange; + height: 2em; + margin: 11em 7em; + width: 2em; + } + </style> + </head> + <body> + <p>Test passes if each of two orange rectangles touch green border by two sides and touch blue rectangle with one of the corners.</p> + <div id="test"> + <div id="reference1"></div> + <div id="reference2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-outset-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-003-ref.html new file mode 100644 index 0000000000..4d55cddd1c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-003-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Blue Box with Green Frame</title> +<style> + #a { + width: 300px; + height: 200px; + position: absolute; + left: 100px; + top: 100px; + border-width: 50px; + border-style: solid; + border-image: linear-gradient(green, green); + background-color: blue; + background-clip: content-box; + border-image-slice: 33%; + padding-left: 100px; + padding-top: 50px; + padding-right: 10px; + padding-bottom: 50px; + } +</style> +<div id="a"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-outset-003.html b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-003.html new file mode 100644 index 0000000000..27bc02682c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-outset-003.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Background Image Outset</title> +<link rel="match" href="border-image-outset-003-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset" /> +<style> + #a { + width: 300px; + height: 200px; + position: absolute; + left: 200px; + top: 150px; + border-width: 50px; + border-style: solid; + border-image: linear-gradient(green, green); + background-color: blue; + background-clip: content-box; + border-image-outset: 50px 10px 50px 100px; + border-image-slice: 33%; + } +</style> +<div id="a"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-002.htm new file mode 100644 index 0000000000..a0c081863d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-002.htm @@ -0,0 +1,40 @@ +<!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 Test: The 'border-image-repeat' property with 'round' as a value</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" /> + <link rel="match" href="reference/border-image-repeat-002-ref.html" /> + <meta name="flags" content="image" /> + <meta name="assert" content="This test checks that the 'round' value for 'border-image-repeat' property specifies that the image is tiled (repeated) to fill the sides of the border image area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does." /> + <style type="text/css"> + div + { + border: 40px double red; + border-image-repeat: round; + border-image-slice: 27; + border-image-source: url("support/blue-and-red-diamonds-81x81.png"); + height: 102px; + margin: 70px; + width: 102px; + } + + /* + 102px divided by 40px == 2.55 + Rounding of 2.55 == 3 + So, there must be at least 3 blue squares + on each horizontal side and on each vertical side. + 102px divided by 3 == 34px + The 6 blue squares at top and bottom edges + will each be 34px wide by 40px tall. + The remaining 6 blue squares at left and right edges + will each be 40px wide by 34px tall. + */ + + </style> + </head> + <body> + <p>Test passes if there are three whole blue diamonds without clipping on four sides of the border.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-004.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-004.htm new file mode 100644 index 0000000000..4019450694 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-004.htm @@ -0,0 +1,27 @@ +<!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 Test: The 'border-image-repeat' property with 'stretch' as a value</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" /> + <link rel="match" href="reference/border-image-repeat-004-ref.html" /> + <meta name="flags" content="image" /> + <meta name="assert" content="This test checks that the 'stretch' value for 'border-image-repeat' property specifies that the image is stretched to fill the sides of the border image area." /> + <style type="text/css"> + div + { + border: 40px double red; + border-image-repeat: stretch; + border-image-slice: 27; + border-image-source: url("support/blue-and-red-diamonds-81x81.png"); + height: 100px; + margin: 70px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is only one (and streched) blue diamond on each side of the border.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-005.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-005.html new file mode 100644 index 0000000000..f5078fc322 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-005.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>'border-image-repeat' with 'space' and 'round'</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat"> +<link rel="match" href="reference/border-image-repeat-005-ref.html"> +<style> +#target { + width: 255px; + height: 80px; + border: 10px solid red; + border-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100' height='100' fill='green'/></svg>") 0 fill / 0px space round; +} +</style> +<p>There should be two green rectangles below:</p> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-1-ref.html new file mode 100644 index 0000000000..942f3eb8c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-1-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat with SVG content</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + </head> + <body> + <svg width='64' height='48' xmlns="http://www.w3.org/2000/svg" version="1.1"> + <g fill='blue' stroke-width='0'> + <path d='M2 2h4v44H2z'/> + <path d='M2 2h60v4H2z'/> + <path d='M58 2h4v44h-4z'/> + <path d='M2 42h60v4H2zM8'/> + </g> + </svg> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-1.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-1.html new file mode 100644 index 0000000000..6e2a43b89d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat with SVG content</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="border-image-repeat-1-ref.html"> + <meta name="assert" content="The test checks the result of border-image-repeat with SVG content."> + <style type="text/css"> + .outer { + height: 16px; + width: 32px; + border-width: 16px; + border-style: solid; + border-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='blue' stroke-width='0'%3E%3Cpath d='M2 2h4v44H2z'/%3E%3Cpath d='M2 2h44v4H2z'/%3E%3Cpath d='M42 2h4v44h-4z'/%3E%3Cpath d='M2 42h44v4H2zM8'/%3E%3C/g%3E%3C/svg%3E") 16 repeat; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-repeat-001.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-repeat-001.html new file mode 100644 index 0000000000..778bc0e4b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-repeat-001.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: border-image-repeat: repeat</title> + + <!-- + + Created: February 24th 2023 + + Last modified: March 23rd 2023 + + Bugzilla bug report 1819487: border-image-repeat and positioning the first tile before repeating + https://bugzilla.mozilla.org/show_bug.cgi?id=1819487 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process"> + <link rel="match" href="reference/border-image-repeat-repeat-001-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks the process of positioning the first tile of each of the 9 border-image areas when 'border-image-repeat' is 'repeat'." name="assert"> + + <style> + div + { + background-color: green; /* so that the center of the + sign gets painted green */ + border: red solid 75px; + border-image-repeat: repeat; /* this is the same as 'repeat repeat' since + " + If the second keyword is absent, it is assumed to be the same as the first. + https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat + " + */ + border-image-source: url("support/500x500-white-red-green-irreg-polygon.png"); + height: 50px; + width: 50px; + } + + div#top-plus-sign + { + border-image-slice: 50; + margin-bottom: 10px; + } + + div#bottom-plus-sign + { + border-image-slice: 1; + } + </style> + + <p>Test passes if there are 2 identical filled green plus ("+") signs and <strong>no red</strong>. + + <div id="top-plus-sign"></div> + + <div id="bottom-plus-sign"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-003.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-003.html new file mode 100644 index 0000000000..034a5ed98a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-003.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: border-image-repeat: round</title> + + <!-- + + Created: June 21st 2023 + + Last modified: August 23rd 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process"> + <link rel="match" href="reference/border-image-repeat-round-003-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks that the process of repeating the tile when 'border-image-repeat' is 'round'. In this test, we check with a specially crafted rectangular border-image how the sliced border-image is, in the first-subtest, rescaled down in the 4 sides, is, in the second-subtest, rescaled up in the 4 sides and, finally, is, in the third-subtest, rescaled up in the left and right sides while being rescaled down in the top and bottom sides." name="assert"> + + <!-- + + 'round' + The image is tiled (repeated) to fill the area. If it does not + fill the area with a whole number of tiles, the image is rescaled + so that it does. + + https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-round + + --> + + <style> + div + { + border: red solid 64px; + border-image-repeat: round; /* this is the same as 'round round' since + " + If the second keyword is absent, it is assumed to be the same as the first. + https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat + " + */ + border-image-slice: 64 fill; /* the center will be black */ + border-image-source: url("support/4bicolor-squares.png"); + display: inline-block; + image-rendering: pixelated; /* attempt to overcome antialias fuzziness */ + margin-right: 1em; + vertical-align: bottom; + } + + div#first-subtest + { + height: 96px; + width: 96px; + /* + 96px divided by 64px == 1.5 which is rounded up to 2. + So, each image should be 96px divided by 2 == 48px + wide or tall. That means that the top and bottom + bicolor (yellow and purple) images should be 48px wide + and the left and right bicolor (orange and blue) + images should be 48px tall. + So, in this first-subtest, the 4 side border-image is + rescaled down, from sliced 64px to 48px. + */ + } + + div#second-subtest + { + height: 80px; + width: 80px; + /* + 80px divided by 64px == 1.25 which is rounded down to 1. + So, each image should be 80px divided by 1 == 80px + wide or tall. That means that the top and bottom + bicolor (yellow and purple) images should be 80px wide + and the left and right bicolor (orange and blue) + images should be 80px tall. + So, in this second-subtest, the 4 side border-image are + rescaled up, from sliced 64px to 80px. + */ + } + + div#third-subtest + { + margin-top: 1em; + + height: 144px; + width: 168px; + /* + 168px divided by 64px == 2.625 which is rounded up to 3. + So, each image should be 168px divided by 3 == 56px + wide. That means that the top and bottom + bicolor (yellow and purple) images should be 56px wide. + 144px divided by 64px == 2.25 which is rounded down to 2. + So, each image should be 144px divided by 2 == 72px + tall. That means that the left and right + bicolor (orange and blue) images should be 72px tall. + So, in this third-subtest, the 2 top and bottom sides + border-image are rescaled down, from sliced 64px to + 56px while the 2 left and right sides border-image are + rescaled up, from sliced 64px to 72px. + */ + } + </style> + + <div id="first-subtest"></div> + + <div id="second-subtest"></div><br> + + <div id="third-subtest"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-1-ref.html new file mode 100644 index 0000000000..298b46dd12 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-1-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 81px; + height: 81px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner2 { + position: absolute; + top: 0px; + left: 27px; + width: 34px; + height: 27px; + background-size: 102px 81px; + background-image: url("support/border.png"); + background-position: -34px 0px; + } + .inner3 { + position: absolute; + top: 0px; + left: 61px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner4 { + position: absolute; + top: 27px; + left: 0px; + width: 27px; + height: 34px; + background-size: 81px 102px; + background-image: url("support/border.png"); + background-position: 0px -34px; + } + .inner5 { + position: absolute; + top: 27px; + left: 61px; + width: 27px; + height: 34px; + background-size: 81px 102px; + background-image: url("support/border.png"); + background-position: -54px -34px; + } + .inner6 { + position: absolute; + top: 61px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner7 { + position: absolute; + top: 61px; + left: 27px; + width: 34px; + height: 27px; + background-size: 102px 81px; + background-image: url("support/border.png"); + background-position: -34px -54px; + } + .inner8 { + position: absolute; + top: 61px; + left: 61px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + <div class="inner5"></div> + <div class="inner6"></div> + <div class="inner7"></div> + <div class="inner8"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-1.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-1.html new file mode 100644 index 0000000000..c4dc17cf7d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-1.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="border-image-repeat-round-1-ref.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula."> + <meta name="fuzzy" content="0-10; 0-596"> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: round round; + width: 34px; + height: 34px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-2-ref.html new file mode 100644 index 0000000000..e76f7cee83 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-2-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 81px; + height: 81px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner2 { + position: absolute; + top: 0px; + left: 27px; + width: 13px; + height: 27px; + background-size: 39px 81px; + background-image: url("support/border.png"); + background-position: -13px 0px; + } + .inner3 { + position: absolute; + top: 0px; + left: 40px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner4 { + position: absolute; + top: 27px; + left: 0px; + width: 27px; + height: 13px; + background-size: 81px 39px; + background-image: url("support/border.png"); + background-position: 0px -13px; + } + .inner5 { + position: absolute; + top: 27px; + left: 40px; + width: 27px; + height: 13px; + background-size: 81px 39px; + background-image: url("support/border.png"); + background-position: -54px -13px; + } + .inner6 { + position: absolute; + top: 40px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner7 { + position: absolute; + top: 40px; + left: 27px; + width: 13px; + height: 27px; + background-size: 39px 81px; + background-image: url("support/border.png"); + background-position: -13px -54px; + } + .inner8 { + position: absolute; + top: 40px; + left: 40px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + <div class="inner5"></div> + <div class="inner6"></div> + <div class="inner7"></div> + <div class="inner8"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-2.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-2.html new file mode 100644 index 0000000000..89f8dc0561 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> + <link rel="match" href="border-image-repeat-round-2-ref.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula."> + <meta name="fuzzy" content="maxDifference=0-55; totalPixels=0-380"> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: round round; + width: 13px; + height: 13px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-stretch-001.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-stretch-001.html new file mode 100644 index 0000000000..fa681b22ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round-stretch-001.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: border-image-repeat: round stretch</title> + + <!-- + + Created: June 23rd 2023 + + Last modified: August 23rd 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process"> + <link rel="match" href="reference/border-image-repeat-round-stretch-001-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks that the process of repeating the tile when 'border-image-repeat' is 'round stretch'. Thanks to a specially crafted rectangular border-image, we check how the sliced border-image is, in the first-subtest, rescaled down horizontally (top and bottom sides), and is, in the second-subtest, rescaled up horizontally (top and bottom sides). In both subtests, the border-image in the vertical axis (left and right sides) are stretched." name="assert"> + + <!-- + + 'round' + The image is tiled (repeated) to fill the area. If it does not + fill the area with a whole number of tiles, the image is rescaled + so that it does. + + https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-round + + + 'stretch' + The image is stretched to fill the area. + + https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-stretch + + --> + + <style> + div + { + border: red solid 64px; + border-image-repeat: round stretch; + /* + " + The first keyword applies to the horizontal scaling and + tiling of the top, middle and bottom parts, the second to + the vertical scaling and tiling of the left, middle and right parts + " + https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat + */ + border-image-slice: 64 fill; /* the center will be black */ + border-image-source: url("support/4bicolor-squares.png"); + display: inline-block; + image-rendering: pixelated; /* attempt to overcome antialias fuzziness */ + margin-right: 1em; + } + + div#first-subtest + { + height: 192px; + width: 96px; + /* + 96px divided by 64px == 1.5 which is rounded up to 2. + So, the image should be 96px divided by 2 == 48px + wide. That means that the top and bottom bicolor + (yellow and purple) images should be 48px wide, + therefore rescaled down, from sliced 64px to 48px. + + The left and right sides should be stretched from + sliced 64px to 192px (3 times). + */ + } + + div#second-subtest + { + height: 128px; + width: 80px; + /* + 80px divided by 64px == 1.25 which is rounded down to 1. + So, each image should be 80px divided by 1 == 80px + wide. That means that the top and bottom bicolor + (yellow and purple) images should be 80px wide + therefore rescaled up, from sliced 64px to 80px. + + The left and right sides should be stretched from + sliced 64px to 128px (2 times). + */ + } + </style> + + <div id="first-subtest"></div> + + <div id="second-subtest"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round.html new file mode 100644 index 0000000000..cf87e8d163 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-round.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds and Borders Test: 'border-image-repeat' set as 'round'</title> + <link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-images"> + <link rel="match" href="reference/border-image-repeat-round-ref.html"> + <meta name="assert" content="diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side."> + <meta name="fuzzy" content="maxDifference=0-111;totalPixels=0-3435"> + <style type="text/css"> + .container { + border: double red 1em; + border-image: url("support/border.png") 27 round; + height:64px; + width:64px; + } + </style> +</head> +<body> + <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> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-011.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-011.html new file mode 100644 index 0000000000..bb7a923c0d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-011.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: border-image-repeat: space</title> + + <!-- + + Created: March 31st 2023 + + Last modified: April 9th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process"> + <link rel="match" href="reference/border-image-repeat-space-011-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks that the process of repeating the tile when 'border-image-repeat' is 'space'. The testing div is wide enough and tall enough to have 2 complete border-image on each of the 4 sides. 96px will become the extra space which must be distributed around the 2 tiles." name="assert"> + + <!-- + + 'space' + The image is tiled (repeated) to fill the area. If it does + not fill the area with a whole number of tiles, the extra + space is distributed around the tiles. + + https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-space + + --> + + <style> + div + { + border: red solid 100px; + border-image-repeat: space; /* this is the same as 'space space' since + " + If the second keyword is absent, it is assumed to be the same as the first. + https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat + " + */ + border-image-slice: 50; + border-image-source: url("support/border-image-repeat-space-011.png"); + height: 296px; + width: 296px; + + /* + + 296 + - + 200 + ====== + 96 + + and since there is 3 spaces created, we divide + the remaining by 3 giving us exactly 32px between and around + each pair of (gray, purple, orange and blue) squares + + */ + } + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-1-ref.html new file mode 100644 index 0000000000..7c6555a0ae --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-1-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 81px; + height: 81px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner2 { + position: absolute; + top: 0px; + left: 31px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px 0px; + } + .inner3 { + position: absolute; + top: 0px; + left: 62px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner4 { + position: absolute; + top: 31px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: 0px -27px; + } + .inner5 { + position: absolute; + top: 31px; + left: 62px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -54px -27px; + } + .inner6 { + position: absolute; + top: 62px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner7 { + position: absolute; + top: 62px; + left: 31px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px -54px; + } + .inner8 { + position: absolute; + top: 62px; + left: 62px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + <div class="inner5"></div> + <div class="inner6"></div> + <div class="inner7"></div> + <div class="inner8"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-1.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-1.html new file mode 100644 index 0000000000..b24883f7bd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-1.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="border-image-repeat-space-1-ref.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits."> + <meta name="fuzzy" content="maxDifference=0-27; totalPixels=0-800"> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: space space; + width: 35px; + height: 35px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-10-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-10-ref.html new file mode 100644 index 0000000000..dc5e776849 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-10-ref.html @@ -0,0 +1,84 @@ +<!doctype html> +<html> +<title>Reference: border-image-repeat:space</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + +<style> + body > div { position: relative; margin-bottom: calc(27px * 2); } + body > div > div { + position: absolute; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + + .outer1 { width: 26px; height: 26px; } + .outer2 { width: 53px; height: 53px; } + .outer3 { width: 70px; height: 70px; } + + .outer1 > .inner2, .outer1 > .inner4, .outer1 > .inner5, .outer1 > .inner7, + .outer2 > .inner2, .outer2 > .inner4, .outer2 > .inner5, .outer2 > .inner7, + .outer3 > .inner2, .outer3 > .inner3, .outer3 > .inner5, .outer3 > .inner6, + .outer3 > .inner7, .outer3 > .inner8, .outer3 > .inner10, .outer3 > .inner11 { + background-position: -27px 0px; + } + + /* + This mocks up the drawing algorithm for border-image, by hand, + with an absolutely-positioned innerN div for each tile of a border + image component. And the components are positioned using calc() + expressions that involve: the border's thickness, the element's + content-box size, and the expected number of tiled repetitions + (e.g. 2) and gaps-between-repetitions (e.g. 3). + */ + + .outer1 > .inner3, .outer1 > .inner8 { left: calc(27px + 26px); } + .outer1 > .inner6, .outer1 > .inner8 { top: calc(27px + 26px); } + + .outer2 > .inner3, .outer2 > .inner5, .outer2 > .inner8 { left: calc(27px + 53px); } + .outer2 > .inner2, .outer2 > .inner7 { left: calc(27px + ((53px - 27px) / 2)); } + .outer2 > .inner4, .outer2 > .inner5 { top: calc(27px + ((53px - 27px) / 2)); } + .outer2 > .inner6, .outer2 > .inner7, .outer2 > .inner8 { top: calc(27px + 53px); } + + .outer3 > .inner4, .outer3 > .inner6, .outer3 > .inner8, .outer3 > .inner12 { left: calc(27px + 70px); } + .outer3 > .inner2, .outer3 > .inner10 { left: calc(27px + ((70px - (27px * 2)) / 3)); } + .outer3 > .inner3, .outer3 > .inner11 { left: calc(70px - ((70px - (27px * 2)) / 3)); } + .outer3 > .inner5, .outer3 > .inner6 { top: calc(27px + ((70px - (27px * 2)) / 3)); } + .outer3 > .inner7, .outer3 > .inner8 { top: calc(70px - ((70px - (27px * 2)) / 3)); } + .outer3 > .inner9, .outer3 > .inner10, .outer3 > .inner11, .outer3 > .inner12 { top: calc(27px + 70px); } + +</style> + +<div class="outer1"> + <div class="inner1"></div> + <div class="inner3"></div> + <div class="inner6"></div> + <div class="inner8"></div> +</div> +<div class="outer2"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + <div class="inner5"></div> + <div class="inner6"></div> + <div class="inner7"></div> + <div class="inner8"></div> +</div> + +<div class="outer3"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + <div class="inner5"></div> + <div class="inner6"></div> + <div class="inner7"></div> + <div class="inner8"></div> + <div class="inner9"></div> + <div class="inner10"></div> + <div class="inner11"></div> + <div class="inner12"></div> +</div> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-10.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-10.html new file mode 100644 index 0000000000..73423ef270 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-10.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> +<title>CSS Border Image: border-image-repeat:space</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> +<link rel="match" href="border-image-repeat-space-10-ref.html"> +<meta name="fuzzy" content="maxDifference=0-163;totalPixels=0-2400"> +<meta name="assert" content="Check that 'border-image-repeat:space' renders as expected by comparing to something not using 'border-image-repeat:space'."> + +<style> + div { + border: 27px solid; + border-image: url("support/border.png") 27 space; + border-image-width: auto; + } +</style> + +<div style="width: 26px; height: 26px"></div> +<div style="width: 53px; height: 53px"></div> +<div style="width: 70px; height: 70px"></div> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-2-ref.html new file mode 100644 index 0000000000..6afc073388 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-2-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: round</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 67px; + height: 67px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner2 { + position: absolute; + top: 0px; + left: 40px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner3 { + position: absolute; + top: 40px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner4 { + position: absolute; + top: 40px; + left: 40px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-2.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-2.html new file mode 100644 index 0000000000..b38bc84734 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-2.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="border-image-repeat-space-2-ref.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit."> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: space space; + width: 13px; + height: 13px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-3-ref.html new file mode 100644 index 0000000000..904b325ccd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-3-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 114px; + height: 114px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner2_1 { + position: absolute; + top: 0px; + left: 29px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px 0px; + } + .inner2_2 { + position: absolute; + top: 0px; + left: 58px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px 0px; + } + .inner3 { + position: absolute; + top: 0px; + left: 87px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner4_1 { + position: absolute; + top: 29px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: 0px -27px; + } + .inner4_2 { + position: absolute; + top: 58px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: 0px -27px; + } + .inner5_1 { + position: absolute; + top: 29px; + left: 87px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -54px -27px; + } + .inner5_2 { + position: absolute; + top: 58px; + left: 87px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -54px -27px; + } + .inner6 { + position: absolute; + top: 87px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner7_1 { + position: absolute; + top: 87px; + left: 29px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px -54px; + } + .inner7_2 { + position: absolute; + top: 87px; + left: 58px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px -54px; + } + .inner8 { + position: absolute; + top: 87px; + left: 87px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2_1"></div> + <div class="inner2_2"></div> + <div class="inner3"></div> + <div class="inner4_1"></div> + <div class="inner4_2"></div> + <div class="inner5_1"></div> + <div class="inner5_2"></div> + <div class="inner6"></div> + <div class="inner7_1"></div> + <div class="inner7_2"></div> + <div class="inner8"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-3.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-3.html new file mode 100644 index 0000000000..60916b2a5c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-3.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="border-image-repeat-space-3-ref.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit."> + <meta name="fuzzy" content="maxDifference=0-27; totalPixels=0-1600"> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: space space; + width: 60px; + height: 60px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4-ref-1.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4-ref-1.html new file mode 100644 index 0000000000..ff7700e9af --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4-ref-1.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="match" href="border-image-repeat-space-4-ref-2.html"> + <style type="text/css"> + .outer { + width: 81px; + height: 81px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner2 { + position: absolute; + top: 0px; + left: 27px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px 0px; + } + .inner3 { + position: absolute; + top: 0px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner4 { + position: absolute; + top: 27px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: 0px -27px; + } + .inner5 { + position: absolute; + top: 27px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -54px -27px; + } + .inner6 { + position: absolute; + top: 54px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner7 { + position: absolute; + top: 54px; + left: 27px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px -54px; + } + .inner8 { + position: absolute; + top: 54px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + <div class="inner5"></div> + <div class="inner6"></div> + <div class="inner7"></div> + <div class="inner8"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4-ref-2.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4-ref-2.html new file mode 100644 index 0000000000..dda3de638a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4-ref-2.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: stretch stretch; + width: 27px; + height: 27px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4.html new file mode 100644 index 0000000000..d82969d71c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-4.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="border-image-repeat-space-4-ref-1.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly."> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: space space; + width: 27px; + height: 27px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5-ref-1.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5-ref-1.html new file mode 100644 index 0000000000..d52cab5bbe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5-ref-1.html @@ -0,0 +1,177 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="match" href="border-image-repeat-space-5-ref-2.html"> + <style type="text/css"> + .outer { + width: 135px; + height: 135px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner2_1 { + position: absolute; + top: 0px; + left: 27px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px 0px; + } + .inner2_2 { + position: absolute; + top: 0px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px 0px; + } + .inner2_3 { + position: absolute; + top: 0px; + left: 81px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px 0px; + } + .inner3 { + position: absolute; + top: 0px; + left: 108px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner4_1 { + position: absolute; + top: 27px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: 0px -27px; + } + .inner4_2 { + position: absolute; + top: 54px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: 0px -27px; + } + .inner4_3 { + position: absolute; + top: 81px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: 0px -27px; + } + .inner5_1 { + position: absolute; + top: 27px; + left: 108px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -54px -27px; + } + .inner5_2 { + position: absolute; + top: 54px; + left: 108px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -54px -27px; + } + .inner5_3 { + position: absolute; + top: 81px; + left: 108px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -54px -27px; + } + .inner6 { + position: absolute; + top: 108px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + .inner7_1 { + position: absolute; + top: 108px; + left: 27px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px -54px; + } + .inner7_2 { + position: absolute; + top: 108px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px -54px; + } + .inner7_3 { + position: absolute; + top: 108px; + left: 81px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + background-position: -27px -54px; + } + .inner8 { + position: absolute; + top: 108px; + left: 108px; + width: 27px; + height: 27px; + background-image: url("support/border.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2_1"></div> + <div class="inner2_2"></div> + <div class="inner2_3"></div> + <div class="inner3"></div> + <div class="inner4_1"></div> + <div class="inner4_2"></div> + <div class="inner4_3"></div> + <div class="inner5_1"></div> + <div class="inner5_2"></div> + <div class="inner5_3"></div> + <div class="inner6"></div> + <div class="inner7_1"></div> + <div class="inner7_2"></div> + <div class="inner7_3"></div> + <div class="inner8"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5-ref-2.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5-ref-2.html new file mode 100644 index 0000000000..bda8d7237f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5-ref-2.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: repeat repeat; + width: 81px; + height: 81px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5.html new file mode 100644 index 0000000000..db21548af8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-5.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="border-image-repeat-space-5-ref-1.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly."> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border: 27px solid transparent; + border-image: url("support/border.png") 27; + border-image-repeat: space space; + width: 81px; + height: 81px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-6-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-6-ref.html new file mode 100644 index 0000000000..307eda0ea5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-6-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 81px; + height: 81px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/reticule-tl.png"); + } + .inner2 { + position: absolute; + top: 0px; + left: 27px; + width: 27px; + height: 27px; + background-image: url("support/reticule-to.png"); + } + .inner3 { + position: absolute; + top: 0px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/reticule-tr.png"); + } + .inner4 { + position: absolute; + top: 27px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/reticule-le.png"); + } + .inner5 { + position: absolute; + top: 27px; + left: 27px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ct.png"); + } + .inner6 { + position: absolute; + top: 27px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ri.png"); + } + .inner7 { + position: absolute; + top: 54px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/reticule-bl.png"); + } + .inner8 { + position: absolute; + top: 54px; + left: 27px; + width: 27px; + height: 27px; + background-image: url("support/reticule-bo.png"); + } + .inner9 { + position: absolute; + top: 54px; + left: 54px; + width: 27px; + height: 27px; + background-image: url("support/reticule-br.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2"></div> + <div class="inner3"></div> + <div class="inner4"></div> + <div class="inner5"></div> + <div class="inner6"></div> + <div class="inner7"></div> + <div class="inner8"></div> + <div class="inner9"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-6.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-6.html new file mode 100644 index 0000000000..045cde139d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-6.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="border-image-repeat-space-6-ref.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly."> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border-width: 27px; + border-style: solid; + border-image: url("support/reticule.png") 27 fill space; + width: 27px; + height: 27px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-7-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-7-ref.html new file mode 100644 index 0000000000..44b07f7696 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-7-ref.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + width: 132px; + height: 132px; + } + .inner1 { + position: absolute; + top: 0px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/reticule-tl.png"); + } + .inner2_1 { + position: absolute; + top: 0px; + left: 35px; + width: 27px; + height: 27px; + background-image: url("support/reticule-to.png"); + } + .inner2_2 { + position: absolute; + top: 0px; + left: 70px; + width: 27px; + height: 27px; + background-image: url("support/reticule-to.png"); + } + .inner3 { + position: absolute; + top: 0px; + left: 105px; + width: 27px; + height: 27px; + background-image: url("support/reticule-tr.png"); + } + .inner4_1 { + position: absolute; + top: 35px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/reticule-le.png"); + } + .inner4_2 { + position: absolute; + top: 70px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/reticule-le.png"); + } + .inner5_1 { + position: absolute; + top: 35px; + left: 35px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ct.png"); + } + .inner5_2 { + position: absolute; + top: 35px; + left: 70px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ct.png"); + } + .inner5_3 { + position: absolute; + top: 70px; + left: 35px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ct.png"); + } + .inner5_4 { + position: absolute; + top: 70px; + left: 70px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ct.png"); + } + .inner6_1 { + position: absolute; + top: 35px; + left: 105px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ri.png"); + } + .inner6_2 { + position: absolute; + top: 70px; + left: 105px; + width: 27px; + height: 27px; + background-image: url("support/reticule-ri.png"); + } + .inner7 { + position: absolute; + top: 105px; + left: 0px; + width: 27px; + height: 27px; + background-image: url("support/reticule-bl.png"); + } + .inner8_1 { + position: absolute; + top: 105px; + left: 35px; + width: 27px; + height: 27px; + background-image: url("support/reticule-bo.png"); + } + .inner8_2 { + position: absolute; + top: 105px; + left: 70px; + width: 27px; + height: 27px; + background-image: url("support/reticule-bo.png"); + } + .inner9 { + position: absolute; + top: 105px; + left: 105px; + width: 27px; + height: 27px; + background-image: url("support/reticule-br.png"); + } + </style> + </head> + <body> + <div class="outer"> + <div class="inner1"></div> + <div class="inner2_1"></div> + <div class="inner2_2"></div> + <div class="inner3"></div> + <div class="inner4_1"></div> + <div class="inner4_2"></div> + <div class="inner5_1"></div> + <div class="inner5_2"></div> + <div class="inner5_3"></div> + <div class="inner5_4"></div> + <div class="inner6_1"></div> + <div class="inner6_2"></div> + <div class="inner7"></div> + <div class="inner8_1"></div> + <div class="inner8_2"></div> + <div class="inner9"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-7.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-7.html new file mode 100644 index 0000000000..033a7b43be --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-7.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Border Image: border-image-repeat: space</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="border-image-repeat-space-7-ref.html"> + <meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit."> + <meta name="fuzzy" content="maxDifference=0-53; totalPixels=0-2320"> + <style type="text/css"> + .outer { + position: absolute; + left: 0px; + top: 0px; + border-width: 27px; + border-style: solid; + border-image: url("support/reticule.png") 27 fill space; + width: 78px; + height: 78px; + } + </style> + </head> + <body> + <div class="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-8-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-8-ref.html new file mode 100644 index 0000000000..113bcb7abe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-8-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<html> +<title>Reference: border-image-repeat:space with non-initial border-image-width</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + div { + border: 27px solid; + border-image: url("support/border.png") 27 space; + border-image-width: 1; + } +</style> + +<div style="width: 505px; height: 50px"></div> +<div style="width: 475px; height: 0px"></div> +<div style="width: 475px; height: 1px"></div> +<div style="width: 26px; height: 26px"></div> +<div style="width: 53px; height: 53px"></div> +<div style="width: 55px; height: 55px"></div> +<div style="width: 505px; height: 50px; writing-mode: vertical-rl"></div> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-8.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-8.html new file mode 100644 index 0000000000..0edfba9e92 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-8.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> +<title>CSS Border Image: border-image-repeat:space with non-initial border-image-width</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> +<link rel="match" href="border-image-repeat-space-8-ref.html"> +<meta name="assert" content="An explicit 'border-image-width' which is exactly the same size as 'border-width' should render the same as 'border-image-width:1' (the initial value)."> +<meta name="fuzzy" content="maxDifference=0-110; totalPixels=0-10540" /> + +<style> + div { + border: 27px solid; + border-image: url("support/border.png") 27 space; + border-image-width: 27px; + } +</style> + +<div style="width: 505px; height: 50px"></div> +<div style="width: 475px; height: 0px"></div> +<div style="width: 475px; height: 1px"></div> +<div style="width: 26px; height: 26px"></div> +<div style="width: 53px; height: 53px"></div> +<div style="width: 55px; height: 55px"></div> +<div style="width: 505px; height: 50px; writing-mode: vertical-rl"></div> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-9.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-9.html new file mode 100644 index 0000000000..aa43328f55 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-space-9.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> +<title>CSS Border Image: border-image-repeat:space with non-initial border-image-width</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> +<link rel="match" href="border-image-repeat-space-8-ref.html"> +<meta name="assert" content="An explicit 'border-image-width:auto' should render the same as 'border-image-width:1' (the initial value) when the 'border-image-slice' is exactly the same size as the 'border-width'."> + +<style> + div { + border: 27px solid; + border-image: url("support/border.png") 27 space; + border-image-width: auto; + } +</style> + +<div style="width: 505px; height: 50px"></div> +<div style="width: 475px; height: 0px"></div> +<div style="width: 475px; height: 1px"></div> +<div style="width: 26px; height: 26px"></div> +<div style="width: 53px; height: 53px"></div> +<div style="width: 55px; height: 55px"></div> +<div style="width: 505px; height: 50px; writing-mode: vertical-rl"></div> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-stretch-round-001.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-stretch-round-001.html new file mode 100644 index 0000000000..8c2963a5ae --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat-stretch-round-001.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: border-image-repeat: stretch round</title> + + <!-- + + Created: June 23rd 2023 + + Last modified: August 23rd 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process"> + <link rel="match" href="reference/border-image-repeat-stretch-round-001-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks that the process of repeating the tile when 'border-image-repeat' is 'stretch round'. Thanks to a specially crafted rectangular border-image, we check how the sliced border-image is, in the first-subtest, rescaled down vertically (left and right sides), and is, in the second-subtest, rescaled up vertically (left and right sides). In both subtests, the border-image in the horizontal axis (top and bottom sides) are stretched." name="assert"> + + <!-- + + 'stretch' + The image is stretched to fill the area. + + https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-stretch + + + 'round' + The image is tiled (repeated) to fill the area. If it does not + fill the area with a whole number of tiles, the image is rescaled + so that it does. + + https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-round + + --> + + <style> + div + { + border: red solid 64px; + border-image-repeat: stretch round; + /* + " + The first keyword applies to the horizontal scaling and + tiling of the top, middle and bottom parts, the second to + the vertical scaling and tiling of the left, middle and right parts + " + https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat + */ + border-image-slice: 64 fill; /* the center will be black */ + border-image-source: url("support/4bicolor-squares.png"); + display: inline-block; + image-rendering: pixelated; /* attempt to overcome antialias fuzziness */ + margin-right: 1em; + } + + div#first-subtest + { + height: 96px; + width: 192px; + /* + 96px divided by 64px == 1.5 which is rounded up to 2. + So, the image should be 96px divided by 2 == 48px + wide. That means that the left and right + bicolor (orange and blue) images should be 48px tall, + therefore rescaled down, from sliced 64px to 48px. + + The top and bottom sides should be stretched from + sliced 64px to 192px (3 times). + */ + } + + div#second-subtest + { + height: 80px; + width: 128px; + /* + 80px divided by 64px == 1.25 which is rounded down to 1. + So, each image should be 80px divided by 1 == 80px + tall. That means that the left and right bicolor + (orange and blue) images should be 80px tall + therefore rescaled up, from sliced 64px to 80px. + + The top and bottom sides should be stretched from + sliced 64px to 128px (2 times). + */ + } + </style> + + <div id="first-subtest"></div> + + <div id="second-subtest"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-repeat_repeatnegx_none_50px.html b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat_repeatnegx_none_50px.html new file mode 100644 index 0000000000..9a7c8e1cfe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-repeat_repeatnegx_none_50px.html @@ -0,0 +1,88 @@ +<html> +<head> + <title> CSS Background Border Test: "border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px" on test div</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" /> + <meta name="assert" content="Check if 'border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px' work on div" /> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <style> + #test{ + height: 30px; + width: 80px; + padding: 5px; + border: 5px solid black; + margin: 5px; + background: blue; + } + </style> +</head> +<body> + <div id="log"></div> + <div id="test"></div> + <script type="text/javascript"> + var div = document.querySelector("#test"); + var t = async_test(); + t.step(function () { + div.style[headProp("border-image-repeat")] = "repeat-x"; + div.style[headProp("height")] = "200px"; + div.style[headProp("width")] = "200px"; + div.style[headProp("border-image-source")] = "none"; + div.style[headProp("border-image-width")] = "50px"; + var propvalue = GetCurrentStyle("border-image-repeat"); + var prop = propvalue.indexOf("repeat-x")!=-1; + assert_false(prop, "The element border-image-repeat can be repeat-x") + var height = GetCurrentStyle("height"); + prop = height.indexOf("200px")!=-1; + assert_true(prop, "The element height should be 200px"); + var width = GetCurrentStyle("width"); + prop = width.indexOf("200px")!=-1; + assert_true(prop, "The element width should be 200px"); + var borderImageSource = GetCurrentStyle("border-image-source"); + prop = borderImageSource.indexOf("none")!=-1; + assert_true(prop, "The element border-image-source should be none"); + var borderImageWidth = GetCurrentStyle("border-image-width"); + prop = borderImageWidth.indexOf("50px")!=-1; + assert_true(prop, "The element border-image-width should be 50px"); + }); + t.done(); + + function GetCurrentStyle(prop) { + try + { + var div = document.querySelector("#test"); //object + prop = prop.replace(/([-][a-z])/g, function ($1) { return $1.toUpperCase().replace("-","") }); + var headprop = headProp(prop); + var fixprop = getComputedStyle(div)[headprop]; + if (!fixprop) + {return "";} + return fixprop; + } + catch(e) + { + return ""; + } +} + +// +function headProp(s) { + var div = document.querySelector("#test"); + if (s in div.style) { + return s; + } + s = s.replace(/([-][a-z])/g, function ($1) { return $1.toUpperCase().replace("-", "") }); + if (s in div.style) { + return s; + } + s = s[0].toUpperCase() + s.slice(1); + var prefixes = ["ms", "Moz", "moz", "webkit", "O"]; + for (var i = 0; i < prefixes.length; i++) { + if ((prefixes[i] + s) in div.style) { + return prefixes[i] + s; + } + } + return s; +} + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-round-and-stretch.html b/testing/web-platform/tests/css/css-backgrounds/border-image-round-and-stretch.html new file mode 100644 index 0000000000..a9b4da706d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-round-and-stretch.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds and Borders Test: 'border-image' set as 'round' and 'stretch' </title> + <link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-images"> + <link rel="match" href="reference/border-image-round-and-stretch-ref.html"> + <meta name="assert" content="orange diamonds on top and bottom border should be repeated 12 times, and orange diamonds on left and right border should be stretched, diamonds in corners should be red, and other diamonds should be orange."> + <meta name="fuzzy" content="maxDifference=0-163;totalPixels=0-6375"> + <style type="text/css"> + .container { + border: double red 1em; + border-image: url("support/border.png") 27 round stretch; + height:77px; + width:192px; + } + </style> +</head> +<body> + <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> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-001.htm new file mode 100644 index 0000000000..26fda73b19 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-001.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: The 'border-image' shorthand property</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <!-- + Test rehabilitated by Gérard Talbot + 2020-05-28 + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image"> + <link rel="match" href="reference/border-image-shorthand-001-ref.html"> + <meta name="assert" content="This test checks that setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat' properties in the shorthand notation produces the same border image as setting individual properties with the same values."> + <style> + div + { + border: 10px double red; + height: 150px; + margin: 50px 0px 100px 50px; + width: 150px; + } + + #test + { + border-image: url("support/blue-and-red-diamonds-81x81.png") 30 / 4 / 2 round stretch; + } + + #reference + { + 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; + } + </style> + + <p>Test passes if there are <strong>2 identical images.</strong> + <div id="test"></div> + <div id="reference"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-002.htm new file mode 100644 index 0000000000..9f47f77a50 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-002.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: Omitted values for 'border-image-outset' property in the 'border-image' shorthand</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <!-- + Test rehabilitated by Gérard Talbot + 2020-05-27 and 2020-06-25 and 2020-09-25 + --> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-image"> + <link rel="match" href="reference/border-image-shorthand-002-ref.html"> + <meta name="assert" content="This test checks that the omitted 'border-image-outset' value in the shorthand property is set to the initial value."> + <style> + div + { + border-color: red; + border-style: double; + border-width: 20px; + height: 100px; + margin: 50px; + width: 100px; + } + + #test + { + /* We first set border-image-outset to an entirely arbitrary value */ + border-image-outset: 2; + /* + and then we check with a shorthand value (which is deliberately + omitting the border-image-outset sub-property) if the border-image-outset + sub-property gets reset to its initial default value + (which is 0 and not 2) + */ + border-image: url("support/9grid40-30-20-10-red-old.png") 40% 15% 20% 5% / 1 stretch; + } + + #reference + { + border-image-outset: 0 0 0 0; + border-image-repeat: stretch; + border-image-slice: 40% 15% 20% 5%; + border-image-source: url("support/9grid40-30-20-10-red-old.png"); + border-image-width: 1; + } + </style> + + <p>Test passes if there are 2 identical green squares and <strong>no red</strong>. + <div id="test"></div> + <div id="reference"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-003.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-003.htm new file mode 100644 index 0000000000..718c3a2b2a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-shorthand-003.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: Omitted values for 'border-image-width' properties in 'border-image' shorthand</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <!-- + Test rehabilitated by Gérard Talbot + 2020-05-27 and 2020-06-25 and 2020-09-25 + --> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-image"> + <link rel="match" href="reference/border-image-shorthand-003-ref.html"> + <meta name="assert" content="This test checks that the omitted 'border-image-width' value in shorthand property is set to the initial value."> + <style> + div + { + border-color: red; + border-style: double; + border-width: 20px; + height: 5px; + margin: 100px; + width: 5px; + } + + #test + { + /* We first set border-image-width to an entirely arbitrary value */ + border-image-width: 3; + /* + and then we check with a shorthand value (which is deliberately + omitting the border-image-width sub-property) if the border-image-width + sub-property gets reset to its initial default value + (which is 1 and not 3) + */ + border-image: url("support/9grid40-30-20-10-red-old.png") 40% 15% 20% 5% / / 2 stretch; + } + + #reference + { + border-image-outset: 2; + border-image-repeat: stretch; + border-image-slice: 40% 15% 20% 5%; + border-image-source: url("support/9grid40-30-20-10-red-old.png"); + border-image-width: 1; + } + </style> + + <p>Test passes if there are 2 identical green squares and <strong>no red</strong>. + <div id="test"></div> + <div id="reference"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-001.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-001.xht new file mode 100644 index 0000000000..3861dcfad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-001.xht @@ -0,0 +1,74 @@ +<!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 Backgrounds and Borders Test: border-image-slice - <percentage></title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" title="6.2. Image Slicing: the 'border-image-slice' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red." /> + + <style type="text/css"><![CDATA[ + div#test + { + border-color: red; + border-style: solid; + border-width: 15px 20px 35px 30px; + border-image-source: url("support/outline-5px-10px-15px-20px-green.png"); + border-image-slice: 5% 10% 15% 20%; /* or 5 10 15 20 : see border-image-slice-002 test */ + border-image-width: 15% 20% 35% 30%; + /* 1 is default ; <number>s represent multiples of the corresponding + computed border-width; % unit is a percentage of height or width of border-box.*/ + border-image-outset: 0; /* 0 is default */ + border-image-repeat: repeat repeat; + /* stretch is default; since the green area we repeat is an + undifferentiated and homogeneous image of green, then 'repeat' or + 'stretch' will be equivalent, will do and should cause equivalent + rendered layout. */ + + /* + Equivalent to this shorthand form (see border-image-slice-124 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-slice-125 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-slice-126 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat; + + or to this shorthand form (see border-image-slice-127 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat; + */ + + width: 50px; + } + + img {vertical-align: top;} + + div#overlapped-red + { + background-color: red; + bottom: 100px; + height: 100px; + position: relative; + width: 100px; + z-index: -1; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled" /></div> + + <div id="overlapped-red"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-002.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-002.xht new file mode 100644 index 0000000000..3ee6655f4c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-002.xht @@ -0,0 +1,74 @@ +<!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 Backgrounds and Borders Test: border-image-slice - <number></title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" title="6.2. Image Slicing: the 'border-image-slice' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="image" /> + <meta name="assert" content="Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red." /> + + <style type="text/css"><![CDATA[ + div#test + { + border-color: red; + border-style: solid; + border-width: 15px 20px 35px 30px; + border-image-source: url("support/outline-5px-10px-15px-20px-green.png"); + border-image-slice: 5 10 15 20; /* or 5% 10% 15% 20% : see border-image-slice-001 test */ + border-image-width: 15% 20% 35% 30%; + /* 1 is default ; <number>s represent multiples of the corresponding + computed border-width; % unit is a percentage of height or width of border-box.*/ + border-image-outset: 0; /* 0 is default */ + border-image-repeat: repeat repeat; + /* stretch is default; since the green area we repeat is an + undifferentiated and homogeneous image of green, then 'repeat' or + 'stretch' will be equivalent, will do and should cause equivalent + rendered layout. */ + + /* + Equivalent to this shorthand form (see border-image-slice-124 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-slice-125 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat; + + or to this shorthand form (see border-image-slice-126 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat; + + or to this shorthand form (see border-image-slice-127 test): + border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat; + */ + + width: 50px; + } + + img {vertical-align: top;} + + div#overlapped-red + { + background-color: red; + bottom: 100px; + height: 100px; + position: relative; + width: 100px; + z-index: -1; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled" /></div> + + <div id="overlapped-red"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-003.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-003.xht new file mode 100644 index 0000000000..75d6b6ffd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-003.xht @@ -0,0 +1,41 @@ +<!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> + + <!-- + Inspired by + http://mxr.mozilla.org/mozilla-central/source/layout/reftests/border-image/different-h-v-ref.html + --> + + <title>CSS Backgrounds and Borders Test: border-image-slice - border-style: none</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" title="6.2. Image Slicing: the 'border-image-slice' property" /> + <link rel="match" href="reference/ref-if-there-is-no-red.xht" /> + <meta name="flags" content="image" /> + <meta name="assert" content="If 'border-style' is not declared, then it defaults to 'none' in which case the computed border-widths on all 4 sides is 0 in which case the border area to be painted with the border-image is also 0 because the default border-image-width is 1 which means 1 time the computed border-width. So, we should see no red in this test." /> + + <style type="text/css"><![CDATA[ + div + { + border-color: red; + border-width: 50px; + border-image-source: url("support/swatch-red.png"); + border-image-slice: 1 1 1 1; /* or 1 or 1 1 or 1 1 1 or 20% or 20% 20% or 20% 20% 20% or etc. */ + border-image-width: 1 1 1 1; /* or 1 or 1 1 or 1 1 1 or 100% or 100% 100% or 100% 100% 100% or etc. */ + border-image-repeat: repeat repeat; /* or repeat or stretch or stretch stretch */ + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-004.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-004.htm new file mode 100644 index 0000000000..1e5adb311f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-004.htm @@ -0,0 +1,26 @@ +<!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 Test: The 'border-image-slice' property with two values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" /> + <link rel="match" href="reference/border-image-slice-004-ref.html" /> + <meta name="flags" content="image" /> + <meta name="assert" content="This test checks that if the third and fourth values of inward offsets in the 'border-image-slice' properties used for bottom and left sides are missing, then bottom offset is the same as the top, and left offset is the same as right one." /> + <style type="text/css"> + div + { + border: 30px double red; + border-image-slice: 20 40; + border-image-source: url("support/9grid20-40-red.png"); + height: 100px; + margin: 50px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is no red color visible on the page.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-005.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-005.htm new file mode 100644 index 0000000000..5d8bd7df1c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-005.htm @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Test: The 'border-image-slice' property with four percentage values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <!-- + Test rehabilitated by Gérard Talbot + 2020-05-27 and 2020-09-28 + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice"> + <link rel="match" href="reference/border-image-slice-005-ref.html"> + <meta name="fuzzy" content="maxDifference=0-92;totalPixels=0-5314"> + <meta name="assert" content="This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '30%' from the right,'20%' from the bottom, and '10%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets."> + <style> + div + { + background-color: orange; + border-color: red; + border-style: double; + border-width: 40px; + border-image-slice: 40% 30% 20% 10%; + /* + The original test was using 'border-image-slice: 40% 15% 20% 5%'. + */ + border-image-source: url("support/9grid40-30-20-10-red.png"); + /* + The top side uses 3 blue borders of 24px wide interleaved with 2 + transparent areas of 24px wide. + So: 5 times 24px == 120px which is 40% of 300px + + The right side uses 3 blue borders of 18px wide interleaved with 2 + transparent areas of 18px wide. + So: 5 times 18px == 90px which is 30% of 300px + + The bottom side uses 3 blue borders of 4px wide interleaved with 2 + transparent areas of 12px wide. + So: 5 times 12px == 60px which is 20% of 300px + + The left side uses 3 blue borders of 6px wide interleaved with 2 + transparent areas of 6px wide. + So: 5 times 6px == 30px which is 10% of 300px + */ + height: 100px; + margin: 50px; + width: 200px; + } + </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></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-006.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-006.htm new file mode 100644 index 0000000000..45feaf60ad --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-006.htm @@ -0,0 +1,26 @@ +<!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 Background and Borders Test: The 'border-image-slice' property with '100%' as a value</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" /> + <link rel="match" href="reference/border-image-slice-006-ref.html" /> + <meta name="flags" content="" /> + <meta name="assert" content="This test checks that if the sum of the right and left widths of the regions given by the 'border-image-slice' values is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty. Analogously for the top and bottom values." /> + <style type="text/css"> + div + { + border: 30px double red; + border-image-slice: 100%; + border-image-source: url("support/green_color.png"); + height: 100px; + margin: 50px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there are four identical green squares and <strong>no red</strong>.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-007.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-007.htm new file mode 100644 index 0000000000..e9c1827fc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-007.htm @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Test: The 'border-image-slice' property with the 'fill' keyword</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <!-- + Test rehabilitated by Gérard Talbot + 2020-05-27 and 2020-09-28 + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice"> + <link rel="match" href="reference/border-image-slice-007-ref.html"> + <meta name="fuzzy" content="maxDifference=0-92;totalPixels=0-5314"> + <meta name="assert" content="This test checks that the 'fill' keyword, if present, causes the middle part of the border-image to be preserved."> + <style> + div + { + background-color: orange; + border-color: red; + border-style: double; + border-width: 40px; + border-image-slice: 40% 30% 20% 10% fill; + /* + The original test was using 'border-image-slice: 40% 15% 20% 5% fill'. + */ + border-image-source: url("support/9grid40-30-20-10-green.png"); + /* + The top side uses 3 blue borders of 24px wide interleaved with 2 + transparent areas of 24px wide. + So: 5 times 24px == 120px which is 40% of 300px + + The right side uses 3 blue borders of 18px wide interleaved with 2 + transparent areas of 18px wide. + So: 5 times 18px == 90px which is 30% of 300px + + The bottom side uses 3 blue borders of 4px wide interleaved with 2 + transparent areas of 12px wide. + So: 5 times 12px == 60px which is 20% of 300px + + The left side uses 3 blue borders of 6px wide interleaved with 2 + transparent areas of 6px wide. + So: 5 times 6px == 30px which is 10% of 300px + */ + height: 100px; + margin: 50px; + width: 200px; + } + </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></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-001.html b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-001.html new file mode 100644 index 0000000000..b6eb589c38 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-001.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: border-image-slice with 'fill' keyword</title> + + <!-- + + Created: February 19th 2023 + + Last modified: February 28th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice"> + <link rel="match" href="reference/border-image-slice-fill-001-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks the rendering process of selecting the middle part of the border-image to be preserved. Since 'border-image-slice' is '50', then the 8 surrounding areas of the border-image area are selecting the white areas of the border-image. The middle part must be filled with red and green area. In which case, only the horizontal center and the vertical center of the border-image must fill the middle area. Therefore, only the green 100x100 area of the border-image must be painted into the middle area." name="assert"> + <meta name="fuzzy" content="maxDifference=0-112; totalPixels=0-199" /> + + <style> + div#test + { + border: red solid 50px; + border-image-repeat: repeat; + border-image-slice: 50 fill; + border-image-source: url("support/500x500-red-with-green-center.png"); + height: 100px; + width: 100px; + } + + /* + + This is how the border-image 500x500-red-with-green-center.png is painted: + + + (0, 500) (50, 500) (200, 500) (300, 500) (450, 500) (500, 500) + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + | ^ | + | White area 50 White area | + | v | + | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 450) + | | FAIL ^ | | + | | . | | + |<-50-> | |<-50-> | + | | 1 | | + | W | Red area Red area | W | + | h | 5 | h | + | i | | i | + | t | 0 | t | + | e | | e | + | | . | | + | a | v | a | + | r | ------------ | r | (500, 300) + | e | | | | e | + | a | Red area | Green | Red area | a | + | | | | | | + | | <!- . . . 150 . . . -> | area | <!- . . . 150 . . . -> | | + | | | | | | + | | ------------ | | (500, 200) + | | ^ | | + | | . | | + | | | | + | | Red area 1 Red area | | + | | | | + | | 5 | | + | | | | + | | 0 | | + | | | | + | | . | | + | | v | | + | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 50) + | ^ | + | White area 50 White area | + | v | + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + (0, 0) (50, 0) (200, 0) (300, 0) (450, 0) (500, 0) + + */ + + div#red-reference-under-test + { + background-color: red; + bottom: 200px; + height: 200px; + position: relative; + width: 200px; + z-index: -1; + } + + /* + The purpose of div#red-reference-under-test in here + is to make sure that the border belt is indeed painted + with the 8 white areas of the border-image and + !_not_! with transparent areas. + */ + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="test"></div> + + <div id="red-reference-under-test"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-002.html b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-002.html new file mode 100644 index 0000000000..26e40479e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-002.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: border-image-slice with 'fill' keyword and with no slicing (edge case)</title> + + <!-- + + Created: February 24th 2023 + + Last modified: February 28th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice"> + <link rel="match" href="reference/border-image-slice-fill-002-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks the rendering process of selecting the middle part of the border-image to be preserved. Since 'border-image-slice' is '0', then the whole border-image is its own middle part. In which case, the horizontal center and the vertical center of the border-image must fill the middle area. The 8 other areas of the border belt in this test are not painted and must become transparent." name="assert"> + <meta name="fuzzy" content="maxDifference=0-112; totalPixels=0-199" /> + + <style> + div#test + { + border: red solid 50px; + border-image-repeat: repeat; + border-image-slice: 0 fill; + border-image-source: url("support/500x500-red-with-green-center.png"); + height: 100px; + width: 100px; + } + + /* + + This is how the border-image 500x500-red-with-green-center.png is painted: + + + (0, 500) (50, 500) (200, 500) (300, 500) (450, 500) (500, 500) + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + | ^ | + | White area 50 White area | + | v | + | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 450) + | | FAIL ^ | | + | | . | | + |<-50-> | |<-50-> | + | | 1 | | + | W | Red area Red area | W | + | h | 5 | h | + | i | | i | + | t | 0 | t | + | e | | e | + | | . | | + | a | v | a | + | r | ------------ | r | (500, 300) + | e | | | | e | + | a | Red area | Green | Red area | a | + | | | | | | + | | <!- . . . 150 . . . -> | area | <!- . . . 150 . . . -> | | + | | | | | | + | | ------------ | | (500, 200) + | | ^ | | + | | . | | + | | | | + | | Red area 1 Red area | | + | | | | + | | 5 | | + | | | | + | | 0 | | + | | | | + | | . | | + | | v | | + | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 50) + | ^ | + | White area 50 White area | + | v | + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + (0, 0) (50, 0) (200, 0) (300, 0) (450, 0) (500, 0) + + */ + + div#yellow-under-test + { + background-color: yellow; + bottom: 200px; + height: 200px; + position: relative; + width: 200px; + z-index: -1; + } + + /* + The purpose of this div#yellow-under-test in + here is to verify and to make sure that the + border belt is indeed painted with the 8 + transparent areas and not with the white + colored areas of the border-image. + */ + </style> + + <p>Test passes if there is a filled green square surrounded by a yellow square and if there is <strong>no red</strong>. + + <div id="test"></div> + + <div id="yellow-under-test"></div> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-003.html b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-003.html new file mode 100644 index 0000000000..05e37c1a20 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-003.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: 'border-image-slice: 100' with 'fill' keyword (edge case)</title> + + <!-- + + Created: February 24th 2023 + + Last modified: March 23rd 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice"> + <link rel="match" href="reference/ref-filled-green-100px-square.xht"> + + <meta content="" name="flags"> + <meta content="This test checks the rendering process of selecting the middle part of the border-image to be preserved. Since 'border-image-slice' is '100', then the 8 surrounding areas of the border-image area are selecting the white areas of the border-image and 50px of (and into) the red area. The middle part must be filled with red and green area. In which case, only the horizontal center and the vertical center of the border-image must fill the middle area. Therefore, only the green 100x100 area of the border-image must be painted into the middle area. This test also checks that since the border-style is 'none', then the computed value of 'border-width' must be 0px. Therefore the border belt of the div can not be painted with the 8 sliced border-image areas. So, we should see no red in this test." name="assert"> + <meta name="fuzzy" content="maxDifference=0-112; totalPixels=0-199" /> + + <style> + div + { + border: red none 100px; + border-image-repeat: repeat; + border-image-slice: 100 fill; + border-image-source: url("support/500x500-red-with-green-center.png"); + height: 100px; + width: 100px; + } + + /* + + This is how the border-image 500x500-red-with-green-center.png is painted: + + + (0, 500) (50, 500) (200, 500) (300, 500) (450, 500) (500, 500) + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + | ^ | + | White area 50 White area | + | v | + | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 450) + | | FAIL ^ | | + | | . | | + |<-50-> | |<-50-> | + | | 1 | | + | W | Red area Red area | W | + | h | 5 | h | + | i | | i | + | t | 0 | t | + | e | | e | + | | . | | + | a | v | a | + | r | ------------ | r | (500, 300) + | e | | | | e | + | a | Red area | Green | Red area | a | + | | | | | | + | | <!- . . . 150 . . . -> | area | <!- . . . 150 . . . -> | | + | | | | | | + | | ------------ | | (500, 200) + | | ^ | | + | | . | | + | | | | + | | Red area 1 Red area | | + | | | | + | | 5 | | + | | | | + | | 0 | | + | | | | + | | . | | + | | v | | + | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 50) + | ^ | + | White area 50 White area | + | v | + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + (0, 0) (50, 0) (200, 0) (300, 0) (450, 0) (500, 0) + + */ + + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-percentage.html b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-percentage.html new file mode 100644 index 0000000000..f53501c9df --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-percentage.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds and Borders Test: 'border-image-slice' set by percentage</title> + <link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-images"> + <link rel="match" href="reference/border-image-repeat-round-ref.html"> + <meta name="assert" content="diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side."> + <meta name="fuzzy" content="maxDifference=0-164; totalPixels=0-3716"> + <style type="text/css"> + .container { + border: double red 1em; + border-image: url("support/border.png") 33.33333% round; + height: 64px; + width: 64px; + } + </style> +</head> +<body> + <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> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-slice-shorthand-reset.html b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-shorthand-reset.html new file mode 100644 index 0000000000..7f178b428d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-slice-shorthand-reset.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice" /> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + div { + border: 1px solid; + border-image-slice: 1; + } + div { + /* Should reset border-image-slice */ + border-image: linear-gradient(black, black); + } +</style> +<div>This text should not have a border, just corner dots</div> +<script> + test(() => { + assert_equals(getComputedStyle(document.querySelector("div")).borderImageSlice, "100%"); + }, "Check that the border-image shorthand resets border-image-slice to its initial value."); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-space-001.html b/testing/web-platform/tests/css/css-backgrounds/border-image-space-001.html new file mode 100644 index 0000000000..720f0df188 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-space-001.html @@ -0,0 +1,28 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <meta name="assert" content="border-image-repeat: space property spaces out background image that doesn't fit an even number of times."> + <meta name="fuzzy" content="maxDifference=0-80; totalPixels=0-1728"> + <link rel="match" href="reference/border-image-space-001-ref.html"> + <style> + .borderContainer { + width: 108px; + height: 108px; + border-image: url('support/border.png') 27; + background-color: green; + border-image-repeat: space; + border-image-width: 20px; + } + </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> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-image-width-001.htm new file mode 100644 index 0000000000..2a5d02e8ac --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-001.htm @@ -0,0 +1,89 @@ +<!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 Background and Borders Test: The 'border-image-width' property with four numbers as a value</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width" /> + <link rel="match" href="reference/border-image-width-001-ref.html" /> + <meta name="flags" content="" /> + <meta name="assert" content="This test checks that four numbers as a value of 'border-image-width' specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the top, right, bottom, and left sides of the border image area. Numbers represent multiples of the corresponding computed border-width. Percentages refer to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets" /> + <style type="text/css"> + div.subtest + { + background-color:red; + border: 10px double red; + border-image-slice: 10; + border-image-source: url("support/green_color.png"); + height: 100px; + margin: 8px auto 8px 0px; + width: 100px; + } + + #subtest1 + { + border-image-width: 5 4 3 2; + } + + #subtest2 + { + border-image-width: 50px 10px; + } + + #subtest3 + { + border-image-width: 40% 20%; + height: 115px; + width: 90px; + } + + #subtest4 + { + border-image-slice: 20 40; + border-image-width: auto; + } + + div div + { + background-color: lime; + } + + div#subtest1 div , div#subtest3 div + { + height: 75px; + margin: 20px 5px; + width: 80px; + } + + div#subtest2 div + { + height: 60px; + margin: 20px 0px; + width: 100px; + } + + div#subtest4 div + { + height: 90px; + margin: 5px 15px; + width: 70px; + } + </style> + </head> + <body> + <div class="subtest" id="subtest1"> + <div></div> + </div> + + <div class="subtest" id="subtest2"> + <div></div> + </div> + + <div class="subtest" id="subtest3"> + <div></div> + </div> + + <div class="subtest" id="subtest4"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-005.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-width-005.xht new file mode 100644 index 0000000000..eeceedef90 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-005.xht @@ -0,0 +1,55 @@ +<!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 Backgrounds and Borders Test: border image area - border-image-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width" title="6.3. Drawing Areas: the 'border-image-width' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="flags" content="image" /> + <meta content="This test checks that the border image area can still exists even if the border area (or border belt) of an element is inexistent. In this test, the border image fills the content area, the padding area and 25px of the extended-beyond-border-belt area, 25px into the margin area of the element." name="assert" /> + + <!-- + created 2015-11-18 + [css-backgrounds] Please remove the "unless there is a border image" wording + http://lists.w3.org/Archives/Public/www-style/2015Nov/0258.html + --> + + <style type="text/css"><![CDATA[ + p + { + margin-bottom: 41px; /* border-image-outset + 16px (1em) . + This 41px margin-bottom value is just to position the rendered layout to accurately match the reference file . */ + } + + div + { + background-color: red; + border-color: red; + border-style: none; /* or border-style: dotted or any other 'border-style' value */ + border-width: 0px; /* so the border belt (or border area) of the element is 0px tall and 0px wide */ + border-image-source: url("support/outline-5px-10px-15px-20px-green.png"); + border-image-slice: 5% 10% 15% 20%; /* <number> Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. */ + border-image-width: 50px; /* The four values of ‘border-image-width’ specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. */ + border-image-outset: 25px 25px 25px 25px; /* The border-image-outset values specify the amount by which the border image area *_ extends beyond the border box_*. */ + height: 20px; + margin-left: 25px; /* == border-image-outset . This margin-left value is just to position the rendered layout to accurately match the reference file . */ + padding: 15px 15px 15px 15px; + width: 20px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-006.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-width-006.xht new file mode 100644 index 0000000000..aa487b76c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-006.xht @@ -0,0 +1,55 @@ +<!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 Backgrounds and Borders Test: border image area - border-image-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width" title="6.3. Drawing Areas: the 'border-image-width' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="flags" content="image" /> + <meta content="This test checks that the border image area can still exists even if the border area (or border belt) of an element is inexistent, even if the content area of an element is inexistent. In this test, the border image fills the padding area and 25px of the extended-beyond-border-belt area, 25px into the margin area of the element." name="assert" /> + + <!-- + created 2015-11-18 + [css-backgrounds] Please remove the "unless there is a border image" wording + http://lists.w3.org/Archives/Public/www-style/2015Nov/0258.html + --> + + <style type="text/css"><![CDATA[ + p + { + margin-bottom: 41px; /* border-image-outset + 16px (1em) . + This 41px margin-bottom value is just to position the rendered layout to accurately match the reference file . */ + } + + div + { + background-color: red; + border-color: red; + border-style: none; /* or border-style: dotted or any other 'border-style' value */ + border-width: 0px; /* so the border belt (or border area) of the element is 0px tall and 0px wide */ + border-image-source: url("support/outline-5px-10px-15px-20px-green.png"); + border-image-slice: 5% 10% 15% 20%; /* <number> Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. */ + border-image-width: 50px; /* The four values of ‘border-image-width’ specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. */ + border-image-outset: 25px 25px 25px 25px; /* The border-image-outset values specify the amount by which the border image area *_ extends beyond the border box_*. */ + height: 0px; + margin-left: 25px; /* == border-image-outset . This margin-left value is just to position the rendered layout to accurately match the reference file . */ + padding: 25px 25px 25px 25px; + width: 0px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-007.xht b/testing/web-platform/tests/css/css-backgrounds/border-image-width-007.xht new file mode 100644 index 0000000000..61726c0087 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-007.xht @@ -0,0 +1,49 @@ +<!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 Backgrounds and Borders Test: border image area - border-image-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width" title="6.3. Drawing Areas: the 'border-image-width' property" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="flags" content="image" /> + <meta content="This test checks that the border image area can still exists even if the border area (or border belt) of an element is inexistent, even if the padding area (or padding belt) is inexistent and even if the content area is inexistent. In this test, the border image fills the margin area of the element. In this test, the whole border image area is outside the border box of the element." name="assert" /> + + <!-- + created 2015-11-18 + [css-backgrounds] Please remove the "unless there is a border image" wording + http://lists.w3.org/Archives/Public/www-style/2015Nov/0258.html + --> + + <style type="text/css"><![CDATA[ + div + { + background-color: red; + border-color: red; + border-style: none; /* or border-style: dotted or any other 'border-style' value */ + border-width: 0px; /* so the border belt (or border area) of the element is 0px tall and 0px wide */ + border-image-source: url("support/outline-5px-10px-15px-20px-green.png"); + border-image-slice: 5% 10% 15% 20%; /* <number> Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. */ + border-image-width: 50px; /* The four values of ‘border-image-width’ specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. */ + border-image-outset: 50px 50px 50px 50px; /* The border-image-outset values specify the amount by which the border image area !_ extends beyond the border box_!. */ + height: 0px; + margin: 66px 50px 50px 50px; + /* Why 66px ? In order to take into consideration the fact that the margin-bottom (16px) of the p element will collapse with the top margin of the div element. */ + width: 0px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-008-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-width-008-ref.html new file mode 100644 index 0000000000..9a06644392 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-008-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>border-image with different widths</title> +<style> + #ref { + width: 360px; + height: 240px; + border-style: solid; + border-width: 40px 40px 20px 0px; + border-image-source: url("support/border.png"); + border-image-slice: 27; + } +</style> +<body> + <div id="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-008.html b/testing/web-platform/tests/css/css-backgrounds/border-image-width-008.html new file mode 100644 index 0000000000..20775aeb9d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-008.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>border-image-width has the same effect as a border-width and the image is displayed even if border-width is zero</title> +<link rel="match" href="border-image-width-008-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-width"> +<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-74" /> +<style> + #test { + width: 400px; + height: 300px; + border-style: solid; + /* Note: Chrome does not display an image if border-width is 0 */ + border-width: 0px; + border-image-source: url("support/border.png"); + border-image-width: 40px 40px 20px 0px; + border-image-slice: 27; + } +</style> +<body> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-009.html b/testing/web-platform/tests/css/css-backgrounds/border-image-width-009.html new file mode 100644 index 0000000000..112c2a485a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-009.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: border image area - border-image-width with 1, 2 or 4 values with percentage unit</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width"> + <link rel="match" href="reference/border-image-width-009-ref.html"> + + <meta name="flags" content=""> + <meta content="This test checks that the border image area can still exist even if the border area (or border belt) of an element is inexistent. In this test, the border image fills the content area, the padding area and 25px of the extended-beyond-border-belt area, 25px into the margin area of each of the 4 tested block elements." name="assert"> + + <style> + div + { + background-color: red; + border: red 100px; + /* + 'border-style' defaults to 'none', in which case computed border-width is 0px. So, here, the border belt (or border area) of each div blocks must be 0px tall and 0px wide for all 4 sides of each of the 4 div block elements. + */ + border-image-source: url("support/9-colored-areas.png"); + border-image-slice: 5% 10% 15% 20%; + /* <number> Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. */ + border-image-outset: 25px; + /* The border-image-outset values specify the amount by which the border image area _ extends beyond the border box_. */ + height: 20px; + margin: 25px 25px 58px 25px; + /* 25px == border-image-outset . + Not part of the test. We want each square to be fully visible and not to expand outside the viewport on the left side. We also want both top border-image-outset and bottom border-image-outset to be rendered without overlapping by taking into account the margin collapsing. After margin collapsing of vertically-adjacent div blocks, we want inter-square distance to be 8px. + */ + padding: 15px; + width: 20px; + } + + div#sub-test1 + { + border-image-width: 50%; + /* + The four values of 'border-image-width' specify offsets + that are used to divide the border image area into nine + parts. They represent inward distances from the the top, + right, bottom, and left sides of the area, respectively. + In this sub-test1, the border-image-width divide the border + image area into four (4) parts, not nine parts. The center + (fill) area is 0px wide by 0px tall. + */ + margin-top: 33px; + } + + div#sub-test2 + { + border-image-width: 50% 30%; + /* + In this sub-test2, the border-image-width divide the border + image area into six (6) parts, not nine parts. The center + (fill) area is 40px wide by 0px tall. + */ + } + + div#sub-test3 + { + border-image-width: 70% 0% 30% 0%; + /* + In this test sub-test3, the border-image-width divide the border + image area into two (2) parts, not nine parts. The center + (fill) area is 100px wide by 0px tall. + */ + } + + div#sub-test4 + { + border-image-width: 0% 70% 0% 30%; + /* + In this sub-test4, the border-image-width divide the border + image area into two (2) parts, not nine parts. The center + (fill) area is 0px wide by 100px tall. */ + } + </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/border-image-width-should-extend-to-padding-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-image-width-should-extend-to-padding-ref.html new file mode 100644 index 0000000000..d9e1ec372e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-should-extend-to-padding-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + `border-image-width` should extend into padding given an empty border area via `border-style: none` +</title> +<style> + div { + width: 136px; + height: 136px; + margin: 20px; + background-color: silver; + border-image-source: linear-gradient(blue, orange); + border-image-slice: 32; + border-image-repeat: repeat; + border-style: solid; + border-width: 32px; + } +</style> + +Test passes if a 200x200px (content + padding + border) box with a 32px border-image is rendered. +<div></div> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-image-width-should-extend-to-padding.html b/testing/web-platform/tests/css/css-backgrounds/border-image-width-should-extend-to-padding.html new file mode 100644 index 0000000000..575921a045 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-image-width-should-extend-to-padding.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Tyler Wilcock" href="mailto:twilco.o@protonmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> + +<!-- Editorial of the spec. + > Since by default a border image is only drawn in the border area, by default a border-style of none will make + > it disappear. However, the border-image-outset and border-image-width values can alter the “border” area into + > which the border image is drawn, extending it into the padding area (in the case of border-image-widths greater + > than the border-width) or extending it outside the border edge (in the case of border-image-outset greater than zero). +--> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/655#issuecomment-331059128"> +<link rel="match" href="border-image-width-should-extend-to-padding-ref.html"> +<title> + `border-image-width` should extend into padding given an empty border area via `border-style: none` +</title> +<style> + div { + width: 200px; + height: 200px; + margin: 20px; + background-color: silver; + border-image-source: linear-gradient(blue, orange); + border-image-slice: 32; + border-image-repeat: repeat; + border-image-width: 32px; + border-style: none; + } +</style> + +Test passes if a 200x200px (content + padding + border) box with a 32px border-image is rendered. +<div></div> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-images.html b/testing/web-platform/tests/css/css-backgrounds/border-images.html new file mode 100644 index 0000000000..930a1df3b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-images.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Backgrounds and Borders Test:border-images with round repeat</title> + <link rel="author" title="babyliner" href="mailto:babyliner1026@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image"> + <meta name="flags" content="image"> + <meta name="assert" content="Testing border-image-repeat:round attribute"> + <style type="text/css"> + .main { + width: 200px; + height: 200px; + border: 1px red solid; + border-image-source: url(./support/border-image.jpg); + border-image-slice: 100 100; + border-image-repeat: round; + border-image-width: 50 50; + } + </style> + </head> +<body> + <p class="explain">Test passes if there are borders with flowers.<br /> + Test fails if there are red solid borders</p> + <div class="main"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-left-width-medium.html b/testing/web-platform/tests/css/css-backgrounds/border-left-width-medium.html new file mode 100644 index 0000000000..b7bd80a833 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-left-width-medium.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-left-width: medium equals 3px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-right-width-3px-ref.html"> +<meta name="assert" content="The 'thin' keyword for 'border-left-width' is 3px." /> +<style> + div { display: inline-block; height: 100px; } + .red-if-too-thin { width: 3px; background: red; } + .cb { position: relative; } + .red-if-too-thick { width: 20px; background: red; } + .overlap-red-if-too-thick { width: 20px; background: white; position: absolute; left: 0; } + .border-test { border-left-style: solid; border-left-width: medium; margin-left: -3px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div><!-- + --><div class=cb><!-- + --><div class=border-test></div><!-- + --><div class=red-if-too-thick></div><!-- + --><div class=overlap-red-if-too-thick></div><!-- + --></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-left-width-thick.html b/testing/web-platform/tests/css/css-backgrounds/border-left-width-thick.html new file mode 100644 index 0000000000..c4787cac8a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-left-width-thick.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-right-width: thick equals 5px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-right-width-5px-ref.html"> +<meta name="assert" content="The 'thin' keyword for 'border-right-width' is 5px." /> +<style> + div { display: inline-block; height: 100px; } + .red-if-too-thin { width: 5px; background: red; } + .cb { position: relative; } + .red-if-too-thick { width: 20px; background: red; } + .overlap-red-if-too-thick { width: 20px; background: white; position: absolute; left: 0; } + .border-test { border-right-style: solid; border-right-width: thick; margin-left: -5px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div><!-- + --><div class=cb><!-- + --><div class=border-test></div><!-- + --><div class=red-if-too-thick></div><!-- + --><div class=overlap-red-if-too-thick></div><!-- + --></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-left-width-thin.html b/testing/web-platform/tests/css/css-backgrounds/border-left-width-thin.html new file mode 100644 index 0000000000..1b8da56a34 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-left-width-thin.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-left-width: thin equals 1px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-right-width-1px-ref.html"> +<meta name="assert" content="The 'thin' keyword for 'border-left-width' is 1px." /> +<style> + div { display: inline-block; height: 100px; } + .red-if-too-thin { width: 1px; background: red; } + .cb { position: relative; } + .red-if-too-thick { width: 20px; background: red; } + .overlap-red-if-too-thick { width: 20px; background: white; position: absolute; left: 0; } + .border-test { border-left-style: solid; border-left-width: thin; margin-left: -1px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div><!-- + --><div class=cb><!-- + --><div class=border-test></div><!-- + --><div class=red-if-too-thick></div><!-- + --><div class=overlap-red-if-too-thick></div><!-- + --></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-001-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-001-ref.xht new file mode 100644 index 0000000000..0d6f4d703e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-001-ref.xht @@ -0,0 +1,27 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + </style> + </head> + <body> + <p>There should be two boxes with no rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-001.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-001.xht new file mode 100644 index 0000000000..5029dd0f15 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-001.xht @@ -0,0 +1,35 @@ +<!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 Test: Borders. border–radius set to zero</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify when border-radius property, when set to zero, works as expected." /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + } + #test { + border-radius: 0; + } + </style> + </head> + <body> + <p>There should be two boxes with no rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-002-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-002-ref.xht new file mode 100644 index 0000000000..b9282343eb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-002-ref.xht @@ -0,0 +1,30 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; + border-bottom-left-radius: 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-002.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-002.xht new file mode 100644 index 0000000000..9f53fc3758 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-002.xht @@ -0,0 +1,38 @@ +<!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 Test: Borders. border–radius using one length value 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-002-ref.xht" /> + <meta name="assert" content="To verify border-radius property set with one length value, works as expected" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: 25px; + } + #reference { + border-top-left-radius: 25px; + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; + border-bottom-left-radius: 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-003-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-003-ref.xht new file mode 100644 index 0000000000..d7017f024f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-003-ref.xht @@ -0,0 +1,30 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 50px; + border-top-right-radius: 0; + border-bottom-right-radius: 50px; + border-bottom-left-radius: 0; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with rounded corners at the top left and bottom right only.</p> + <ul> + <li>PASS if the two boxes below are the same and only top left and bottom right corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-003.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-003.xht new file mode 100644 index 0000000000..398358f1f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-003.xht @@ -0,0 +1,38 @@ +<!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 Test: Borders. border–radius set to value: 50px 0</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-003-ref.xht" /> + <meta name="assert" content="To verify border-radius property set with one length value along with a zero, works as expected" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: 50px 0; + } + #reference { + border-top-left-radius: 50px; + border-top-right-radius: 0; + border-bottom-right-radius: 50px; + border-bottom-left-radius: 0; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with rounded corners at the top left and bottom right only.</p> + <ul> + <li>PASS if the two boxes below are the same and only top left and bottom right corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-004-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-004-ref.xht new file mode 100644 index 0000000000..3062d7832f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-004-ref.xht @@ -0,0 +1,31 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 50px 25px; + border-top-right-radius: 50px 25px; + border-bottom-right-radius: 50px 25px; + border-bottom-left-radius: 50px 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-004.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-004.xht new file mode 100644 index 0000000000..8a000d909c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-004.xht @@ -0,0 +1,39 @@ +<!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 Test: Borders. border–radius using slash: 50px / 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-004-ref.xht" /> + <meta name="assert" content="To verify border-radius property set with value using slash, works as expected" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: 50px / 25px; + } + #reference { + border-top-left-radius: 50px 25px; + border-top-right-radius: 50px 25px; + border-bottom-right-radius: 50px 25px; + border-bottom-left-radius: 50px 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-005-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-005-ref.xht new file mode 100644 index 0000000000..57605a76f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-005-ref.xht @@ -0,0 +1,31 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 50px 20px; + border-top-right-radius: 15px 25px; + border-bottom-right-radius: 40px 20px; + border-bottom-left-radius: 15px 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-005.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-005.xht new file mode 100644 index 0000000000..7be93af636 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-005.xht @@ -0,0 +1,38 @@ +<!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 Test: Borders. border–radius using slash: 50px 15px 40px / 20px 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-005-ref.xht" /> + <meta name="assert" content="To verify border-radius property set with value using slash, works as expected" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: 50px 15px 40px / 20px 25px; + } + #reference { + border-top-left-radius: 50px 20px; + border-top-right-radius: 15px 25px; + border-bottom-right-radius: 40px 20px; + border-bottom-left-radius: 15px 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-006-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-006-ref.xht new file mode 100644 index 0000000000..93c19491ea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-006-ref.xht @@ -0,0 +1,30 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 50px 20px; + border-top-right-radius: 15px 25px; + border-bottom-right-radius: 50px 10%; + border-bottom-left-radius: 15px 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-006.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-006.xht new file mode 100644 index 0000000000..89da74c482 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-006.xht @@ -0,0 +1,38 @@ +<!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 Test: Borders. border–radius using slash: 50px 15px / 20px 25px 10%</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-006-ref.xht" /> + <meta name="assert" content="To verify border-radius property set with values using slash, works as expected" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: 50px 15px / 20px 25px 10%; + } + #reference { + border-top-left-radius: 50px 20px; + border-top-right-radius: 15px 25px; + border-bottom-right-radius: 50px 10%; + border-bottom-left-radius: 15px 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-007-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-007-ref.xht new file mode 100644 index 0000000000..c10c0ee848 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-007-ref.xht @@ -0,0 +1,30 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 50px 0.5in; + border-top-right-radius: 10mm 25px; + border-bottom-right-radius: 6pc 30%; + border-bottom-left-radius: 15% 70pt; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-007.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-007.xht new file mode 100644 index 0000000000..df442e0085 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-007.xht @@ -0,0 +1,38 @@ +<!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 Test: Borders. border–radius using slash: 50px 10mm 3pc 15% / 0.5in 25px 10% 70pt</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-007-ref.xht" /> + <meta name="assert" content="To verify border-radius property set with values (in different units) using slash, works as expected" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: 50px 10mm 6pc 15% / 0.5in 25px 30% 70pt; + } + #reference { + border-top-left-radius: 50px 0.5in; + border-top-right-radius: 10mm 25px; + border-bottom-right-radius: 6pc 30%; + border-bottom-left-radius: 15% 70pt; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-008.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-008.xht new file mode 100644 index 0000000000..a4b1408dd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-008.xht @@ -0,0 +1,35 @@ +<!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 Test: Borders. border–radius using slash: 50px 15px 40px 30em 25em / 20px 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify border-radius property set with excess values, works as expected" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + } + #test { + border-radius: 50px 15px 40px 30em 25em / 20px 25px; + } + </style> + </head> + <body> + <p>There should be two boxes with no rounded corners.</p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-009-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-009-ref.xht new file mode 100644 index 0000000000..c86e22d387 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-009-ref.xht @@ -0,0 +1,31 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 20%; + border-top-right-radius: 25px; + border-bottom-right-radius: 20%; + border-bottom-left-radius: 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-009.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-009.xht new file mode 100644 index 0000000000..822f166859 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-009.xht @@ -0,0 +1,41 @@ +<!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 Test: Borders. border–radius using "inherit"</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-009-ref.xht" /> + <meta name="assert" content="To verify inherit feature works, when it is assigned to border-radius" /> + <style> + body { + border-radius: 20% 25px; + } + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: inherit; + } + #reference { + border-top-left-radius: 20%; + border-top-right-radius: 25px; + border-bottom-right-radius: 20%; + border-bottom-left-radius: 25px; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with 4 rounded corners.</p> + <ul> + <li>PASS if the two boxes below are the same and all 4 corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-010-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-010-ref.xht new file mode 100644 index 0000000000..882032bfbc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-010-ref.xht @@ -0,0 +1,31 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-top-left-radius: 20% 25px; + border-top-right-radius: 0; + border-bottom-right-radius: 20pt 3em; + border-bottom-left-radius: 0; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with rounded corners at the top left and bottom right only.</p> + <ul> + <li>PASS if the two boxes below are the same and only top left and bottom right corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-010.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-010.xht new file mode 100644 index 0000000000..32d464673a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-010.xht @@ -0,0 +1,42 @@ +<!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 Test: Borders. border–radius using "inherit"</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-010-ref.xht" /> + <meta name="assert" content="To verify inherit feature works, when it is assigned to border-radius" /> + <style> + body { + border-top-left-radius: 20% 25px; + border-bottom-right-radius: 20pt 3em; + } + div { + border: 2px solid #a1a1a1; + background: #dddddd; + width: 200px; + height: 100px; + border-radius: inherit; + } + #reference { + border-top-left-radius: 20% 25px; + border-top-right-radius: 0; + border-bottom-right-radius: 20pt 3em; + border-bottom-left-radius: 0; + } + </style> + </head> + <body> + <p>There should be two identical boxes, each with rounded corners at the top left and bottom right only.</p> + <ul> + <li>PASS if the two boxes below are the same and only top left and bottom right corners are rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-011-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-011-ref.xht new file mode 100644 index 0000000000..cdeaf1c8e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-011-ref.xht @@ -0,0 +1,24 @@ +<!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 Test: Border radius reference</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <style> + div { + position: absolute; + top: 150px; + width: 200px; + height: 100px; + } + </style> + </head> + <body> + <p>A white rectangle with no border-radius property sits exactly on top of an exact same size red rectangle with border-radius set to zero.</p> + <ul> + <li>PASS if no red is visible on the page.</li> + <li>FAIL if any red is visible.</li> + </ul> + + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-011.xht b/testing/web-platform/tests/css/css-backgrounds/border-radius-011.xht new file mode 100644 index 0000000000..8439302d6b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-011.xht @@ -0,0 +1,40 @@ +<!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 Test: Borders. border–radius set to zero</title> + <link rel="author" title="Nokia" href="http://www.nokia.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" /> + <link rel="match" href="border-radius-011-ref.xht" /> + <meta name="assert" content="If border-radius is zero, all corners are square." /> + <style> + div { + width: 200px; + height: 100px; + } + #reference { + background: red; + position: absolute; + top: 150px; + left: 30px; + } + #test { + position: absolute; + border-radius: 0; + background: white; + top: 150px; + left: 30px; + } + </style> + </head> + <body> + <p>A white rectangle with no border-radius property sits exactly on top of an exact same size red rectangle with border-radius set to zero.</p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if no red is visible on the page.</li> + <li>FAIL if any red is visible.</li> + </ul> + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="reference"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-012-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-012-ref.html new file mode 100644 index 0000000000..75f7985aa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-012-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .spacer { display:inline-block; width:20px; } +</style> +<p>There should be two good-looking arcs below.</p> +<div style="font-size:40px; line-height:100px;"> + <span style="border:20px solid; border-radius:40px; border-right:none; border-top-right-radius:0; border-bottom-right-radius:0;"> + <span class="spacer"></span></span> + <br> + <span style="border:20px solid; border-radius:40px; border-left:none; border-top-left-radius:0; border-bottom-left-radius:0;"> + <span class="spacer"></span></span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-012.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-012.html new file mode 100644 index 0000000000..e3b97e2ea7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-012.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1119323"> +<link rel="match" href="border-radius-012-ref.html"> +<style> + .spacer { display:inline-block; width:20px; } +</style> +<p>There should be two good-looking arcs below.</p> +<div style="font-size:40px; line-height:100px;"> + <span style="border:20px solid; border-radius:40px;"> + <span class="spacer"></span><br><span class="spacer"></span> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-013.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-013.html new file mode 100644 index 0000000000..090f6a28b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-013.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1107832"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 90px; height: 90px; border: 5px solid green; background: red"> + <div style="width: 90px; height: 90px; background: green"> + <!-- the src is a 1x1 green png --> + <img style="border-radius: 50%; width: 90px; height: 90px" + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABGdBTUEAAK/INwWK6QAAAANQTFRFAIAAnPmlkQAAAApJREFUeNpjYAAAAAIAAeUn3vwAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-001.htm new file mode 100644 index 0000000000..88def48128 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-001.htm @@ -0,0 +1,21 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to inline</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: inline' it produces rounded corners." /> + <style type="text/css"> + div + { + border: 10px solid green; + border-radius: 10px; + display: inline; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-002.htm new file mode 100644 index 0000000000..46deb294c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-002.htm @@ -0,0 +1,25 @@ +<!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 Test: 'Border-radius' applied to element with a display of 'block'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: block' it produces rounded corners." /> + <style type="text/css"> + span + { + border: solid green; + border-radius: 10px; + display: block; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-003.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-003.htm new file mode 100644 index 0000000000..d2502e3e4e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-003.htm @@ -0,0 +1,23 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to list-item.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: list-item' it produces rounded corners." /> + <style type="text/css"> + div + { + border: solid green; + border-radius: 10px; + display: list-item; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-004.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-004.htm new file mode 100644 index 0000000000..03af498779 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-004.htm @@ -0,0 +1,23 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to run-in.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: run-in' it produces rounded corners." /> + <style type="text/css"> + div + { + border: solid green; + border-radius: 10px; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-005.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-005.htm new file mode 100644 index 0000000000..7c566420b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-005.htm @@ -0,0 +1,23 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to inline-block.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: inline-block' it produces rounded corners." /> + <style type="text/css"> + div + { + border: solid green; + border-radius: 10px; + display: inline-block; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-006.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-006.htm new file mode 100644 index 0000000000..468aa839f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-006.htm @@ -0,0 +1,35 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to 'table'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: table' it produces rounded corners." /> + <style type="text/css"> + #table + { + border: solid green; + border-radius: 10px; + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-007.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-007.htm new file mode 100644 index 0000000000..3d9d2f3aae --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-007.htm @@ -0,0 +1,40 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to 'table-caption'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: table-caption' it produces rounded corners." /> + <style type="text/css"> + #caption + { + border: solid green; + border-radius: 10px; + display: table-caption; + height: 1in; + width: 1in; + } + #table + { + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-008.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-008.htm new file mode 100644 index 0000000000..6e8a85c4a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-008.htm @@ -0,0 +1,35 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to 'table-cell'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: table-cell' it produces rounded corners." /> + <style type="text/css"> + #table + { + display: table; + } + #row + { + display: table-row; + } + #cell + { + border: solid green; + border-radius: 10px; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-009.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-009.htm new file mode 100644 index 0000000000..4659570aa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-009.htm @@ -0,0 +1,36 @@ +<!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 Test: 'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'." /> + <style type="text/css"> + #test + { + border: solid green; + border-radius: 10px; + display: table-row; + } + #table + { + border-collapse: collapse; + display: table; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with sharp or rounded corners below.</p> + <div id="table"> + <div id="test"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-010.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-010.htm new file mode 100644 index 0000000000..da547dbca4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-010.htm @@ -0,0 +1,24 @@ +<!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 Test: 'Border-radius' applied to element with a display of 'none'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' property is applied to elements with a display of 'none' then it continues to not have a layout." /> + <style type="text/css"> + div + { + border: solid red; + color: red; + border-radius: 10px; + display: none; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div>FAIL</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-011.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-011.htm new file mode 100644 index 0000000000..5b33a006d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-011.htm @@ -0,0 +1,35 @@ +<!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 Test: 'Border-radius' applied to element with a display of 'inline-table'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: inline-table' it produces rounded corners." /> + <style type="text/css"> + #test + { + border: solid green; + border-radius: 10px; + display: inline-table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + width: 1in; + height: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below.</p> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-012.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-012.htm new file mode 100644 index 0000000000..0a7efb2a35 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-012.htm @@ -0,0 +1,41 @@ +<!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 Test: 'Border-radius' should be ignored in element with 'display' set to 'table-column' when 'border-collapse: collapse'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column' when 'border-collapse: collapse'." /> + <style type="text/css"> + #test + { + border: solid green; + border-radius: 10px; + display: table-column; + } + #table + { + border-collapse: collapse; + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with sharp or rounded corners below.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-013.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-013.htm new file mode 100644 index 0000000000..d75716a281 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-013.htm @@ -0,0 +1,42 @@ +<!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 Test: 'Border-radius' should be ignored in element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-row-group' when 'border-collapse: collapse'." /> + <style type="text/css"> + #test + { + border: solid green; + border-radius: 10px; + display: table-row-group; + } + #table + { + border-collapse: collapse; + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with sharp or rounded corners below.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-014.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-014.htm new file mode 100644 index 0000000000..985c29f3f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-014.htm @@ -0,0 +1,42 @@ +<!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 Test: 'Border-radius' should be ignored in element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-header-group' when 'border-collapse: collapse'." /> + <style type="text/css"> + #test + { + border: solid green; + border-radius: 10px; + display: table-header-group; + } + #table + { + border-collapse: collapse; + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with sharp or rounded corners below.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-015.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-015.htm new file mode 100644 index 0000000000..4a77ba1694 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-015.htm @@ -0,0 +1,42 @@ +<!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 Test: 'Border-radius' should be ignored in element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'." /> + <style type="text/css"> + #test + { + border: solid green; + border-radius: 10px; + display: table-footer-group; + } + #table + { + border-collapse: collapse; + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with sharp or rounded corners below.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-016.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-016.htm new file mode 100644 index 0000000000..7584799e29 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-016.htm @@ -0,0 +1,41 @@ +<!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 Test: 'Border-radius' should be ignored in element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column-group' when 'border-collapse: collapse'." /> + <style type="text/css"> + #test + { + border: solid green; + border-radius: 10px; + display: table-column-group; + } + #table + { + border-collapse: collapse; + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box with sharp or rounded corners below.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-017.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-017.htm new file mode 100644 index 0000000000..6c90be6472 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-applies-to-017.htm @@ -0,0 +1,25 @@ +<!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 Test: 'Border-radius' applied to element with 'display' set to 'inherit'.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to an element with 'displaye: inherit' it produces rounded corners." /> + <style type="text/css"> + div div + { + display: inherit; + height: 1in; + width: 1in; + border: solid green; + border-radius: 10px; + } + </style> + </head> + <body> + <p>Test passes if there is a box with rounded corners below</p> + <div> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-clip-001.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-clip-001.html new file mode 100644 index 0000000000..971bba1a18 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-clip-001.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: 'border-radius' and corner-clipping of content</title> + + <link rel="author" title="zhouli" href="mailto:liz@oupeng.com"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-background-3/#corner-clipping"> + <link rel="match" href="reference/border-radius-clipping-ref.html"> + + <meta name="assert" content="Test passes if a box with border-radius that clips its content to a box edge clips to the border-radius curve in the corners."> + + <meta name="fuzzy" content="0-57;0-1552"> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body > div { float: left; } + .round + { + border: transparent double 20px; + border-radius: 50%; + padding: 10px; + } + #bg, #txt, #img-contain + { + overflow: hidden; + width: 80px; + } + #bg > div + { + margin: -10px; + background-image: url("support/100x100-green-with-red-corners.png"); + height: 100px; + width: 100px; + } + #txt > div + { + margin: -10px; + color: green; + font: 50px/1 Ahem; + } + + img + { + display: block; + } + #img-contain > img + { + margin: -10px; + } + #img-self + { + margin: -10px; + } + </style> + + <p>Test passes if there are four filled green circles and <strong>no red</strong>. + + <div id="bg" class="round"> + <div></div> + </div> + + <div id="txt" class="round"> + <div>XX<br>XX</div> + </div> + + <div id="img-contain" class="round"> + <img src="support/swatch-green.png" width=100 height=100> + </div> + + <div> + <img id="img-self" class="round" src="support/swatch-green.png" width=100> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-clip-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-clip-002.htm new file mode 100644 index 0000000000..759bd5ce48 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-clip-002.htm @@ -0,0 +1,60 @@ +<!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/"> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="match" href="reference/border-radius-clip-002-ref.htm"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-clipping"> + <meta name="assert" content="Background is clipped to the curve of the content-box when 'background-clip: content-box'"> + <meta name=fuzzy content="0-70;0-50"> + <style type="text/css"> + #test-base + { + width: 98px; + height: 98px; + border: 10px double black; + padding: 11px; + border-radius: 40px; + background: red url(support/swatch-red.png); + background-clip: content-box; + } + #reference-cover + { + margin: -120px 0 40px 20px; + width: 100px; + height: 100px; + border-radius: 20px; + background-color: black; + } + + #reference-base + { + width: 98px; + height: 98px; + margin-top: 62px; + margin-left: 20px; + border-radius: 20px; + background: red url(support/swatch-red.png); + } + #test-cover + { + margin-top: -120px; + border: 10px double black; + padding: 10px; + width: 100px; + height: 100px; + border-radius: 40px; + background-color: black; + background-clip: content-box; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="test-base"></div> + <div id="reference-cover"></div> + <div id="reference-base"></div> + <div id="test-cover"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-002.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-002.html new file mode 100644 index 0000000000..eea0ee104f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: 'border-radius' and corner-clipping of content elements</title> + + <link rel="author" title="zhouli" href="mailto:liz@oupeng.com"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#corner-clipping"> + <link rel="match" href="../reference/ref-nothing-below.xht"> + + <meta content="" name="flag"> + <meta name="assert" content="When set with 'overflow: hidden', an outer container must clip text of its child element at its corners. In this test, the outer container, which has immense size, has a 'border-radius' declaration which implies that the clipping must occur at its curve."> + + <style> + body + { + overflow: hidden; + /* + otherwise, horizontal and vertical + scroll bars will be generated + */ + } + + div#fail-condition + { + border-radius: 250em; + color: red; + font-size: 32px; + height: 500em; + overflow: hidden; + width: 500em; + } + </style> + + <p>Test passes if there is nothing below. + + <div id="fail-condition">FAIL FAIL FAIL FAIL</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-with-transform-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-with-transform-001-ref.html new file mode 100644 index 0000000000..db3ae40c5b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-with-transform-001-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Test (Backgrounds): border-radius clipping on overflow:hidden with transforms</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<style> + +#outer { + border: 10px solid #000; + border-radius: 60px; + width: 200px; + height: 200px; + background: blue; + position: absolute; + top: 10px; + left: 10px; +} + +#coverinner, #coverouter { + position: absolute; + border: 4px solid fuchsia; + filter: grayscale(30%); +} + +#coverinner { + width: 196px; + height: 196px; + top: 18px; + left: 18px; + border-radius: 52px; +} + +#coverouter { + width: 216px; + height: 216px; + top: 8px; + left: 8px; + border-radius: 62px; +} + +</style> + +<div id="outer"> +</div> +<div id="coverinner"> +</div> +<div id="coverouter"> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-with-transform-001.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-with-transform-001.html new file mode 100644 index 0000000000..b2187cf07a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-clipping-with-transform-001.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<title>CSS Test (Backgrounds): border-radius clipping on overflow:hidden with transforms</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1207151"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> +<link rel="match" href="border-radius-clipping-with-transform-001-ref.html"> +<meta name="assert" content="The content should be clipped correctly, despite the interesting transforms."> +<meta name="fuzzy" content="maxDifference=0-48; totalPixels=0-6783" /> +<style> + +#outer { + border: 10px solid #000; + border-radius: 60px; + width: 200px; + height: 200px; + overflow: hidden; + transform: rotate(90deg); + position: absolute; + top: 10px; + left: 10px; +} +#inner { + width: 100%; + height: 100%; + background: blue; + transform: translateZ(0); +} + +#coverinner, #coverouter { + position: absolute; + border: 4px solid fuchsia; + filter: grayscale(30%); +} + +#coverinner { + width: 196px; + height: 196px; + top: 18px; + left: 18px; + border-radius: 52px; +} + +#coverouter { + width: 216px; + height: 216px; + top: 8px; + left: 8px; + border-radius: 62px; +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> +<div id="coverinner"> +</div> +<div id="coverouter"> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-content-edge-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-content-edge-001.htm new file mode 100644 index 0000000000..fffdec86f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-content-edge-001.htm @@ -0,0 +1,23 @@ +<!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 Test: 'Border-radius' set to 'img'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="The content of replaced element 'img' is trimmed to the content edge curve of a rounded corner." /> + <style type="text/css"> + img + { + border-radius: 50px; + padding: 10px; + border: 10px solid black; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <img src="../support/black_red.png" /> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-css-text.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-css-text.html new file mode 100644 index 0000000000..f8311bae80 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-css-text.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-radius in cssText</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<div id="test"></div> +<script> +test(() => { + const element = document.getElementById("test"); + assert_equals(element.style.cssText, "", "cssText is initially empty"); + + element.style.borderRadius = "10px"; + assert_equals(element.style.cssText, "border-radius: 10px;"); + + element.style.borderTopLeftRadius = "20px"; + assert_equals(element.style.cssText, "border-radius: 20px 10px 10px;"); + + element.style.borderBottomLeftRadius = "30px"; + assert_equals(element.style.cssText, "border-radius: 20px 10px 10px 30px;"); +}, "Setting border-radius does not expand to longhand properties in cssText."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-different-width-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-different-width-001.htm new file mode 100644 index 0000000000..51bfe5aa5b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-different-width-001.htm @@ -0,0 +1,71 @@ +<!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 Test: Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides." /> + <style type="text/css"> + div + { + width:200px; + height:100px; + border-style:solid; + border-radius: 40px; + margin: 10px; + } + #test1 + { + border-width:10px 15px 20px 30px; + } + #test2 + { + border-width:10px 25px 40px; + } + #test3 + { + border-width:10px 25px; + } + #test4 + { + border-width:thin medium thick thin; + } + #test5 + { + border-width:thin medium thick; + } + #test6 + { + border-width:thin thick; + } + #test7 + { + border-style:solid; + border-width:4px 16px 32px 100px; + border-radius:80px; + height:264px; + width:50px; + } + </style> + </head> + <body> + <p>Test passes if the boxes have rounded corners and show a smooth transition between the thicker and the thinner sides.</p> + <table> + <tr> + <td> + <div id="test1"></div> + <div id="test2"></div> + <div id="test3"></div> + </td> + <td> + <div id="test4"></div> + <div id="test5"></div> + <div id="test6"></div> + </td> + <td> + <div id="test7"></div> + </td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-dynamic-from-no-radius-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-dynamic-from-no-radius-ref.html new file mode 100644 index 0000000000..e0ab6ce441 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-dynamic-from-no-radius-ref.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + #outer { + width: 100px; + height: 100px; + } + #inner { + width: 100%; + height: 100%; + background: green; + border-radius: 99px; + } +</style> +<p>Should be a green circle below</p> +<div id="outer"> + <div id="inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-dynamic-from-no-radius.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-dynamic-from-no-radius.html new file mode 100644 index 0000000000..335548f33a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-dynamic-from-no-radius.html @@ -0,0 +1,36 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Relative dynamic border-radius change</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1554755"> +<link rel="match" href="border-radius-dynamic-from-no-radius-ref.html"> +<style> + #outer { + width: 100px; + height: 100px; + } + #inner { + width: 100%; + height: 100%; + background: green; + /* The key is that this starts off computing to zero */ + border-radius: calc(100% - 1px); + } +</style> +<p>Should be a green circle below</p> +<div id="outer" style="width: 1px; height: 1px;"> + <div id="inner"></div> +</div> +<script> +onload = function() { + requestAnimationFrame(function() { + requestAnimationFrame(function() { + outer.style.height = ""; + outer.style.width = ""; + document.documentElement.className = ""; + }); + }); +} +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-horizontal-value-is-zero.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-horizontal-value-is-zero.html new file mode 100644 index 0000000000..3a461699b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-horizontal-value-is-zero.html @@ -0,0 +1,36 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"> + <link rel="match" href="reference/border-radius-horizontal-value-is-zero-ref.html"> + <meta name="assert" content="If the horizontal radius length is zero, the corner is square, not rounded."> + <style type="text/css"> + #rounded-div { + position: absolute; + top: 50px; + left: 5px; + width: 13em; + height: 8em; + border: solid 1em green; + border-radius: 0em / 5em + } + #error { + position: absolute; + top: 50px; + left: 5px; + width: 13em; + height: 8em; + border: solid 1em red; + } + </style> +</head> +<body> + <p>The test passes if the rectangle has four square corners (no red is shown).</p> + <div id="error"> + </div> + <div id="rounded-div"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-initial-value-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-initial-value-001.htm new file mode 100644 index 0000000000..9716a233d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-initial-value-001.htm @@ -0,0 +1,30 @@ +<!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 Test: Initial value of 'border-radius' is 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="Initial value of 'border-radius' is 0." /> + <style type="text/css"> + div + { + width: 1in; + height: 1in; + border: 0.2in solid black; + margin: 10px; + } + #reference + { + } + #test + { + border-radius : 0; + } + </style> + </head> + <body> + <p>Test passes if the two boxes are identical.</p> + <div id="reference"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-not-inherited-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-not-inherited-001.htm new file mode 100644 index 0000000000..5bda6f3650 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-not-inherited-001.htm @@ -0,0 +1,38 @@ +<!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 Test: 'Border-radius' is not inherited by default</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' is not inherited by default." /> + <style type="text/css"> + div + { + height: 100px; + width: 100px; + } + #parent + { + border: 1px solid transparent; + border-radius: 100px; + } + #child + { + border: medium solid black; + } + #reference + { + margin-top: 10px; + border: medium solid black; + border-radius: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a square and a circle below.</p> + <div id="parent"> + <div id="child"></div> + </div> + <div id="reference"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-overflow-hidden.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-overflow-hidden.html new file mode 100644 index 0000000000..b597f33432 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-overflow-hidden.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> + +<head> + +<title>CSS Backgrounds and Borders Test: Clipping to the border-radius curve</title> +<link rel="author" title="Lea Verou" href="http://lea.verou.me" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#corner-clipping" /> +<meta name="assert" content="Effects that clip to the border or padding edge (such as 'overflow' other than 'visible') must clip to the curve" /> +<style> +div { + position: absolute; +} + +.ref, +.test { + border-radius: 30px; +} + +.ref { + width: 104px; + height: 104px; + left: -2px; + top: -2px; + background-color: green; +} + +.test, +.contents { + background-color: red; + width: 100px; + height: 100px; +} + +.test { + overflow: hidden; +} + +</style> + +</head> +<body> + +<p>Test passes if there is one filled green rounded square and <strong>no red</strong>.</p> +<div class="container"> + <div class="test"> + <div class="contents"></div> + </div> + <div class="ref"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-001.htm new file mode 100644 index 0000000000..134df40027 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-001.htm @@ -0,0 +1,59 @@ +<!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 Test: 'Border-radius' shorthand is used to set all four 'border-[*]-radius' properties.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="'Border-radius' shorthand sets all four 'border-[*]-radius' properties." /> + <style type="text/css"> + div + { + width: 200px; + height: 200px; + } + #reference1 + { + border: 10px solid red; + border-top-left-radius: 40px; + border-top-right-radius: 40px; + border-bottom-right-radius: 40px; + border-bottom-left-radius: 40px; + } + #test1 + { + margin-top: -220px; + border: 10px solid black; + border-radius : 40px; + } + #reference2 + { + border: 10px solid red; + border-top-left-radius: 2em 0.5em; + border-top-right-radius: 1em 3em; + border-bottom-right-radius: 4em 0.5em; + border-bottom-left-radius: 1em 3em; + } + #test2 + { + margin-top: -220px; + border: 10px solid black; + border-radius: 2em 1em 4em / 0.5em 3em; + } + </style> + </head> + <body> + <p>Test passes if there are two black boxes with rounded corners and red is not visible on the page.</p> + <table> + <tr> + <td> + <div id="reference1"></div> + <div id="test1"></div> + </td> + <td> + <div id="reference2"></div> + <div id="test2"></div> + </td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-002-ref.html new file mode 100644 index 0000000000..7597d3e27a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-002-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Border radius shorthand reference</title> + <link rel="author" title="arno" href="mailto:arno@arno.org"> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border-top-left-radius: 29px 5px; + border-top-right-radius: 43px 11px; + border-bottom-left-radius: 13px 17px; + border-bottom-right-radius: 19px 23px; + background: #dddddd; + width: 200px; + height: 100px; + } + /* ]]> */ + </style> + </head> + <body> + <p> + There should be one box, with four rounded corners, each corner a different radius. + </p> + <ul> + <li>PASS if the box below has four rounded corners.</li> + <li>FAIL if the corners are not rounded.</li> + </ul> + + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-002.html b/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-002.html new file mode 100644 index 0000000000..8191cf48f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-shorthand-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Borders Radius Shorthand. </title> + <link rel="author" title="Arno" href="mailto:arno@arno.org"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"> + <link rel="match" href="border-radius-shorthand-002-ref.html"> + <meta name="assert" content="The shorthand border radius property can be used to specify all four eliptical corners of a box."> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border-radius: 29px 43px 19px 13px / 5px 11px 23px 17px; + + background: #dddddd; + width: 200px; + height: 100px; + } + /* ]]> */ + </style> + + </head> + <body> + <p> + There should be one box, with four rounded corners, each corner a different radius. + </p> + <ul> + <li>PASS if the box below has four rounded corners.</li> + <li>FAIL if the corners are not rounded.</li> + </ul> + + <div></div> + + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-style-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-001.htm new file mode 100644 index 0000000000..9bf4498c71 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-001.htm @@ -0,0 +1,26 @@ +<!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 Test: 'Border-radius' is set with 'border-style: dotted'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-color" /> + <meta name="assert" content="'Border-style: dotted' follows the curve of the border." /> + <style type="text/css"> + div + { + border: 0.2in dotted; + height: 2in; + width: 2in; + border-radius: 80px; + border-top-color: purple; + border-right-color: green; + border-bottom-color: blue; + border-left-color: #808080; + } + </style> + </head> + <body> + <p>Test passes if there is a rounded border with purple dots on the top, green on the right side, blue on the bottom side, and grey on the left side.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-style-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-002.htm new file mode 100644 index 0000000000..8c1e20685e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-002.htm @@ -0,0 +1,22 @@ +<!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 Test: 'Border-radius' is set with 'border-style: dashed'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="assert" content="'Border-style: dashed' follows the curve of the border." /> + <style type="text/css"> + div + { + width: 2in; + height: 2in; + border: 0.2in dashed black; + border-radius: 80px; + } + </style> + </head> + <body> + <p>Test passes if there is a box below with dashed border and rounded corners.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-style-003.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-003.htm new file mode 100644 index 0000000000..a000c9bbe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-003.htm @@ -0,0 +1,22 @@ +<!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 Test: 'Border-radius' is set with 'border-style: double'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="assert" content="'Border-style: double' follows the curve of the border." /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + border: 70px double black; + border-radius: 20px; + } + </style> + </head> + <body> + <p>Test passes if there is a box below with double border and rounded corners.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-style-004.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-004.htm new file mode 100644 index 0000000000..0b0582b9e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-004.htm @@ -0,0 +1,22 @@ +<!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 Test: 'Border-radius' is set with 'border-style: solid'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="assert" content="'Border-style: solid' follows the curve of the border." /> + <style type="text/css"> + div + { + width: 2in; + height: 2in; + border: 0.2in solid black; + border-radius: 80px; + } + </style> + </head> + <body> + <p>Test passes if there is a box below with solid border and rounded corners.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-style-005.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-005.htm new file mode 100644 index 0000000000..66c7ac1305 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-style-005.htm @@ -0,0 +1,23 @@ +<!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 Test: 'Border-radius' is set with 'border-style: none'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="assert" content="'Border-style: none' follows the curve of the border." /> + <style type="text/css"> + div + { + width: 2in; + height: 2in; + border: none red; + background: black; + border-radius: 80px; + } + </style> + </head> + <body> + <p>Test passes if there is a black box below with rounded corners and no red is 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/border-radius-sum-of-radii-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-001.htm new file mode 100644 index 0000000000..e829a5a574 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-001.htm @@ -0,0 +1,142 @@ +<!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 Test: Different variations on the sum of border-radius for adjacent corners</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="If the sum of any two adjacent corner radii exceeds the size of the border box, all the corner radii are reduced proportionally until none of them overlap." /> + <style type="text/css"> + div + { + border: 10px red solid; + width: 80px; + height: 80px; + } + #reference1 + { + border-radius: 30px 75px 15px 15px; + } + #test1 + { + margin-top: -100px; + border-color: black; + border-radius: 60px 150px 30px 30px; + } + #reference2 + { + border-radius: 0 100px 0 20px; + } + #test2 + { + margin-top: -100px; + border-color: black; + border-radius: 0 150px 0 30px; + } + #reference3 + { + border-radius: 100px 0 20px 0; + } + #test3 + { + margin-top: -100px; + border-color: black; + border-radius: 150px 0 30px 0; + } + #reference4 + { + border-radius: 41.67px 58.31px 25px 25px; + } + #test4 + { + margin-top: -100px; + border-color: black; + border-radius: 50px 70px 30px 30px; + } + #reference5 + { + border-radius: 50px 50px 10px 10px; + } + #test5 + { + margin-top: -100px; + border-color: black; + border-radius: 150px 150px 30px 30px; + } + #reference6 + { + border-radius: 25px 41.67px 58.31px 25px; + } + #test6 + { + margin-top: -100px; + border-color: black; + border-radius: 30px 50px 70px 30px; + } + #reference7 + { + border-radius: 25px 25px 41.67px 58.31px; + } + #test7 + { + margin-top: -100px; + border-color: black; + border-radius: 30px 30px 50px 70px; + } + #reference8 + { + border-radius: 58.31px 25px 25px 41.67px; + } + #test8 + { + margin-top: -100px; + border-color: black; + border-radius: 70px 30px 30px 50px; + } + </style> + </head> + <body> + <p>Test passes if there are no squares on the page and there is no red visible on the page.</p> + <table> + <tr> + <td> + <div id="reference1"></div> + <div id="test1"></div> + </td> + <td> + <div id="reference2"></div> + <div id="test2"></div> + </td> + </tr> + <tr> + <td> + <div id="reference3"></div> + <div id="test3"></div> + </td> + <td> + <div id="reference4"></div> + <div id="test4"></div> + </td> + </tr> + <tr> + <td> + <div id="reference5"></div> + <div id="test5"></div> + </td> + <td> + <div id="reference6"></div> + <div id="test6"></div> + </td> + </tr> + <tr> + <td> + <div id="reference7"></div> + <div id="test7"></div> + </td> + <td> + <div id="reference8"></div> + <div id="test8"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-002.htm new file mode 100644 index 0000000000..74e30c4269 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-002.htm @@ -0,0 +1,82 @@ +<!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 Test: Different variations on the value of 'f'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'." /> + <style type="text/css"> + div + { + border: 10px red solid; + width: 80px; + height: 80px; + } + #reference1 + { + border-radius: 50px 50px 30px 30px; + } + #test1 + { + margin-top: -100px; + border-color: black; + border-radius: 50px 50px 30px 30px; + } + #reference2 + { + border-radius: 0 100px 0 0; + } + #test2 + { + margin-top: -100px; + border-color: black; + border-radius: 30px 15000000px 30px 30px; + } + #reference3 + { + border-radius: 0; + } + #test3 + { + margin-top: -100px; + border-color: black; + border-radius: 30px -150px 30px 30px; + } + #reference4 + { + width: 1000px; + height: 500px; + border-radius: 0.1px 0.1px 0.1px 0.1px; + } + #test4 + { + width: 1000px; + height: 500px; + margin-top: -520px; + border-color: black; + border-radius: 0.1px 0.1px 0.1px 0.1px; + } + </style> + </head> + <body> + <p>Test passes if there are no more than two rectangles on the page and there is no red visible on the page.</p> + <table> + <tr> + <td> + <div id="reference1"></div> + <div id="test1"></div> + </td> + <td> + <div id="reference2"></div> + <div id="test2"></div> + </td> + <td> + <div id="reference3"></div> + <div id="test3"></div> + </td> + </tr> + </table> + <div id="reference4"></div> + <div id="test4"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-with-three-values-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-with-three-values-001.htm new file mode 100644 index 0000000000..b227b0a640 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-with-three-values-001.htm @@ -0,0 +1,35 @@ +<!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 Test: 'Border-radius' property with three values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="If bottom-left radius is omitted in the 'border-radius' property then the bottom-left radius is the same as the top-right radius." /> + <style type="text/css"> + div + { + width: 2in; + height: 2in; + border: 0.2in solid red; + } + #reference + { + border-top-left-radius : 10px; + border-top-right-radius : 50px; + border-bottom-right-radius : 30px; + border-bottom-left-radius : 50px; + } + #test + { + border-radius: 10px 50px 30px; + border-color: green; + margin-top: -2.4in; + } + </style> + </head> + <body> + <p>Test passes if the box has rounded corners and there is no red visible on the page.</p> + <div id="reference"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-with-two-values-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-with-two-values-001.htm new file mode 100644 index 0000000000..d88d404ec1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-with-two-values-001.htm @@ -0,0 +1,35 @@ +<!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 Test: 'Border-radius' property with two values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="If bottom-right radius is omitted in the 'border-radius' property then the bottom-right radius is the same as the top-left radius." /> + <style type="text/css"> + div + { + width: 2in; + height: 2in; + border: 0.2in solid red; + } + #reference + { + border-top-left-radius : 10px; + border-top-right-radius : 50px; + border-bottom-right-radius : 10px; + border-bottom-left-radius : 50px; + } + #test + { + border-radius: 10px 50px; + border-color: green; + margin-top: -2.4in; + } + </style> + </head> + <body> + <p>Test passes if the box has rounded corners and there is no red visible on the page.</p> + <div id="reference"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-right-width-medium.html b/testing/web-platform/tests/css/css-backgrounds/border-right-width-medium.html new file mode 100644 index 0000000000..47de799e54 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-right-width-medium.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-right-width: medium equals 3px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-right-width-3px-ref.html"> +<meta name="assert" content="The 'thin' keyword for 'border-right-width' is 3px." /> +<style> + div { display: inline-block; height: 100px; } + .red-if-too-thin { width: 3px; background: red; } + .cb { position: relative; } + .red-if-too-thick { width: 20px; background: red; } + .overlap-red-if-too-thick { width: 20px; background: white; position: absolute; left: 0; } + .border-test { border-right-style: solid; border-right-width: medium; margin-left: -3px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div><!-- + --><div class=cb><!-- + --><div class=border-test></div><!-- + --><div class=red-if-too-thick></div><!-- + --><div class=overlap-red-if-too-thick></div><!-- + --></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-right-width-thick.html b/testing/web-platform/tests/css/css-backgrounds/border-right-width-thick.html new file mode 100644 index 0000000000..af518a79f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-right-width-thick.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-right-width: thick equals 5px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-right-width-5px-ref.html"> +<meta name="assert" content="The 'thick' keyword for 'border-right-width' is 5px." /> +<style> + div { display: inline-block; height: 100px; } + .red-if-too-thin { width: 5px; background: red; } + .cb { position: relative; } + .red-if-too-thick { width: 20px; background: red; } + .overlap-red-if-too-thick { width: 20px; background: white; position: absolute; left: 0; } + .border-test { border-right-style: solid; border-right-width: thick; margin-left: -5px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div><!-- + --><div class=cb><!-- + --><div class=border-test></div><!-- + --><div class=red-if-too-thick></div><!-- + --><div class=overlap-red-if-too-thick></div><!-- + --></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-right-width-thin.html b/testing/web-platform/tests/css/css-backgrounds/border-right-width-thin.html new file mode 100644 index 0000000000..d8483a87ca --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-right-width-thin.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-right-width: thin equals 1px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-right-width-1px-ref.html"> +<meta name="assert" content="The 'thin' keyword for 'border-right-width' is 1px." /> +<style> + div { display: inline-block; height: 100px; } + .red-if-too-thin { width: 1px; background: red; } + .cb { position: relative; } + .red-if-too-thick { width: 20px; background: red; } + .overlap-red-if-too-thick { width: 20px; background: white; position: absolute; left: 0; } + .border-test { border-right-style: solid; border-right-width: thin; margin-left: -1px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div><!-- + --><div class=cb><!-- + --><div class=border-test></div><!-- + --><div class=red-if-too-thick></div><!-- + --><div class=overlap-red-if-too-thick></div><!-- + --></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-001.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-001.xht new file mode 100644 index 0000000000..0346518e21 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-001.xht @@ -0,0 +1,64 @@ +<!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 Test: Borders. Border-top-left-radius using 0 value</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if the border-top-left-radius property, when set with 0, works as expected."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-left-radius: 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-left-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-002.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-002.xht new file mode 100644 index 0000000000..2278fbf617 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-002.xht @@ -0,0 +1,58 @@ +<!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 Test: Borders. Border-top-left-radius using one length value: 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <meta name="assert" content="To verify border-top-left-radius property set to one length value, works fine"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-top-left-radius: 25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p id="testdetails"> + </p> + <p> + There should be a box with a rounded top left corner.</p> + <ul> + <li>PASS if only top left corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + + <div id="test"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "25px"; + + var testResult = check_CSS_property("border-top-left-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-004-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-004-ref.xht new file mode 100644 index 0000000000..b9c9cdac88 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-004-ref.xht @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-left-radius: 48px 28px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-left-radius: 48px 28px; + } + </style> + </head> + <body> + <p>The box should have a border-top-left-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-004.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-004.xht new file mode 100644 index 0000000000..71c9883240 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-004.xht @@ -0,0 +1,26 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-left-radius using one percentage</title> + <link rel="match" href="border-top-left-radius-004-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-left-radius: 20%; + } + </style> + </head> + <body> + <p>The box should have a border-top-left-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-005-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-005-ref.xht new file mode 100644 index 0000000000..f1a1935aa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-005-ref.xht @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-left-radius: 48px 14px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-left-radius: 48px 14px; + } + </style> + </head> + <body> + <p>The box should have a border-top-left-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-005.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-005.xht new file mode 100644 index 0000000000..68fd36d710 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-005.xht @@ -0,0 +1,25 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-left-radius using two percentages</title> + <link rel="match" href="border-top-left-radius-005-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-1" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-left-radius: 20% 10%; + } + </style> + </head> + <body> + <p>The box should have a border-top-left-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-010.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-010.xht new file mode 100644 index 0000000000..9d4afb327c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-010.xht @@ -0,0 +1,64 @@ +<!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 Test: Borders. Border-top-left-radius using one length value: 25px 0</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if either length is 0, then the corner is not rounded."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-left-radius: 25px 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-left-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-011.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-011.xht new file mode 100644 index 0000000000..2fd9ebabf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-011.xht @@ -0,0 +1,64 @@ +<!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 Test: Borders. Border-top-left-radius using one length value: 0 3em</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if either length is 0, then the corner is not rounded."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-left-radius: 0 3em; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-left-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-012.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-012.xht new file mode 100644 index 0000000000..44e5a0661d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-012.xht @@ -0,0 +1,57 @@ +<!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 Test: Borders. Border-top-left-radius using two length values: 0.5in 10mm</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <meta name="assert" content="To verify border-top-left-radius property set to two length values (with different units), works fine"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-top-left-radius: 0.5in 10mm; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p id="testdetails"> + </p> + <p> + There should be a box with a rounded top left corner.</p> + <ul> + <li>PASS if only top left corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "48px 37px"; + + var testResult = check_CSS_property("border-top-left-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-013.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-013.xht new file mode 100644 index 0000000000..c5c65de50d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-013.xht @@ -0,0 +1,58 @@ +<!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 Test: Borders. Border-top-left-radius using two length values: 40pt 2pc</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <meta name="assert" content="To verify border-top-left-radius property set to two length values (with different units), works fine"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-top-left-radius: 40pt 2pc; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p id="testdetails"> + </p> + <p> + There should be a box with a rounded top left corner.</p> + <ul> + <li>PASS if only top left corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + + <div id="test"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "53px 32px"; + + var testResult = check_CSS_property("border-top-left-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-014.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-014.xht new file mode 100644 index 0000000000..8df8f12e1d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-014.xht @@ -0,0 +1,64 @@ +<!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 Test: Borders. Border-top-left-radius using two length values: 50px -25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if one length value is negative in border-top-left-radius, then the corner is not rounded."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-left-radius: 50px -25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-left-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-001.htm new file mode 100644 index 0000000000..08407edd81 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-001.htm @@ -0,0 +1,38 @@ +<!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 Test: 'Border-top-left-radius' with two values.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius" /> + <meta name="assert" content="The first value of the 'border-top-left-radius' is the horizontal radius of the rounded corner and the second value is its vertical radius." /> + <style type="text/css"> + body + { + margin: 10px; + } + #test + { + height: 288px; + width: 384px; + border: 2px solid; + border-top-left-radius: 50px 80px; + } + #reference + { + position: absolute; + border: 2px solid blue; + border-left: none; + border-top: none; + left: 10px; + top: 10px; + width: 50px; + height: 80px; + } + </style> + </head> + <body> + <div id ="reference"></div> + <div id="test"></div> + <p>Test passes if the two blue lines are radii of the rounded corner.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-002.htm b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-002.htm new file mode 100644 index 0000000000..fb850d3e47 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-002.htm @@ -0,0 +1,31 @@ +<!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 Test: 'Border-top-left-radius' with one value.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius" /> + <meta name="assert" content="'Border-top-left-radius' with an omitted second value has the vertical radius of the rounded corner equal to its horizontal radius." /> + <style type="text/css"> + #reference + { + height: 288px; + width: 384px; + border: 2px solid red; + border-top-left-radius: 50px 50px; + } + #test + { + margin-top: -292px; + height: 288px; + width: 384px; + border: 2px solid black; + border-top-left-radius: 50px; + } + </style> + </head> + <body> + <p>Test passes if the top-left corner of the box has a rounded corner and there is no red visible on the page.</p> + <div id ="reference"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-003.htm b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-003.htm new file mode 100644 index 0000000000..137fd3ad4b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-003.htm @@ -0,0 +1,48 @@ +<!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 Test: 'Border-top-left-radius' with one value as 0.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius" /> + <meta name="assert" content="If either value of 'border-top-left-radius' is 0 then the corner is a square." /> + <style type="text/css"> + div + { + width: 1in; + height: 1in; + border: 0.2in solid black; + margin: 10px; + } + #reference + { + } + #test1 + { + border-top-left-radius : 0 80px; + } + #test2 + { + border-top-left-radius : 80px 0; + } + #test3 + { + border-top-left-radius : 0 0; + } + </style> + </head> + <body> + <p>Test passes if the four boxes are identical.</p> + <table> + <tr> + <td> + <div id="reference"></div> + <div id="test1"></div> + </td> + <td> + <div id="test2"></div> + <div id="test3"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-004.htm b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-004.htm new file mode 100644 index 0000000000..f08c3d38a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-left-radius-values-004.htm @@ -0,0 +1,113 @@ +<!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 Test: Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box." /> + <style type="text/css"> + div + { + width: 60px; + height: 100px; + border: 20px solid; + } + td + { + width: 150px; + height: 150px; + } + .red + { + border-color: red; + } + .pos + { + margin-top: -140px; + } + .reference1 + { + border-top-left-radius: 97px 20px; + } + .test1 + { + border-top-left-radius: 97% 20px; + } + .reference2 + { + border-top-left-radius: 51px 20px; + } + .test2 + { + border-top-left-radius: 51% 20px; + } + .reference3 + { + border-top-left-radius: 25px 20px; + } + .test3 + { + border-top-left-radius: 25% 20px; + } + .reference4 + { + border-top-left-radius: 11px 20px; + } + .test4 + { + border-top-left-radius: 11% 20px; + } + .reference5 + { + border-top-left-radius: 7px 20px; + } + .test5 + { + border-top-left-radius: 7% 20px; + } + .reference6 + { + border-top-left-radius: 5px 20px; + } + .test6 + { + border-top-left-radius: 5% 20px; + } + </style> + </head> + <body> + <p>Test passes if the top left corner of each of the boxes is curved and if there is no red visible on the page.</p> + <table> + <tr> + <td> + <div class="red reference1"></div> + <div class="pos test1"></div> + </td> + <td> + <div class="red reference2"></div> + <div class="pos test2"></div> + </td> + </tr> + <tr> + <td> + <div class="red reference3"></div> + <div class="pos test3"></div> + </td> + <td> + <div class="red reference4"></div> + <div class="pos test4"></div> + </td> + </tr> + <tr> + <td> + <div class="red reference5"></div> + <div class="pos test5"></div> + </td> + <td> + <div class="red reference6"></div> + <div class="pos test6"></div> + </td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-001.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-001.xht new file mode 100644 index 0000000000..30091f329c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-001.xht @@ -0,0 +1,64 @@ +<!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 Test: Borders. Border-top-right-radius using 0 value</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if the border-top-right-radius property, when set with 0, works as expected"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-right-radius: 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-right-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-002.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-002.xht new file mode 100644 index 0000000000..b78024d4ba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-002.xht @@ -0,0 +1,58 @@ +<!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 Test: Borders. Border-top-right-radius using one length value: 25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <meta name="assert" content="To verify border-top-right-radius property set to one length value, works fine"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-top-right-radius: 25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p id="testdetails"> + </p> + <p> + There should be a box with a rounded top right corner.</p> + <ul> + <li>PASS if only top right corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + + <div id="test"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "25px"; + + var testResult = check_CSS_property("border-top-right-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-004-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-004-ref.xht new file mode 100644 index 0000000000..ae031513ae --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-004-ref.xht @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-right-radius: 48px 28px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-right-radius: 48px 28px; + } + </style> + </head> + <body> + <p>The box should have a border-top-right-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-004.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-004.xht new file mode 100644 index 0000000000..3068a24d43 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-004.xht @@ -0,0 +1,25 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-right-radius using one percentage</title> + <link rel="match" href="border-top-right-radius-004-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-right-radius: 20%; + } + </style> + </head> + <body> + <p>The box should have a border-top-right-radius of 48px 28px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-005-ref.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-005-ref.xht new file mode 100644 index 0000000000..a3303b72c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-005-ref.xht @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-right-radius: 48px 14px reference</title> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-right-radius: 48px 14px; + } + </style> + </head> + <body> + <p>The box should have a border-top-right-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-005.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-005.xht new file mode 100644 index 0000000000..46004d6fa1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-005.xht @@ -0,0 +1,25 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>border-top-right-radius using two percentages</title> + <link rel="match" href="border-top-right-radius-005-ref.xht" /> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius" /> + <meta name="fuzzy" content="maxDifference=0-36; totalPixels=0-131" /> + <style type="text/css"> + div + { + width: 200px; + height: 100px; + + background: orange; + border: 20px solid teal; + border-top-right-radius: 20% 10%; + } + </style> + </head> + <body> + <p>The box should have a border-top-right-radius of 48px 14px. The + horizontal radius should therefore be clearly larger than the + vertical radius.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-010.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-010.xht new file mode 100644 index 0000000000..8c540304b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-010.xht @@ -0,0 +1,65 @@ +<!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 Test: Borders. Border-top-right-radius using one length value: 25px 0</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if either length is 0, then the corner is not rounded."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-right-radius: 25px 0; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-right-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-011.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-011.xht new file mode 100644 index 0000000000..e59567e219 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-011.xht @@ -0,0 +1,64 @@ +<!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 Test: Borders. Border-top-right-radius using one length value: 0 3em</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if either length is 0, then the corner is not rounded."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-right-radius: 0 3em; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-right-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-012.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-012.xht new file mode 100644 index 0000000000..75689f6e77 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-012.xht @@ -0,0 +1,57 @@ +<!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 Test: Borders. Border-top-right-radius using two length values: 0.5in 10mm</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <meta name="assert" content="To verify border-top-right-radius property sets to two length values (with different units), works fine"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-top-right-radius: 0.5in 10mm; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p id="testdetails"> + </p> + <p> + There should be a box with a rounded top right corner.</p> + <ul> + <li>PASS if only top right corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "48px 37px"; + + var testResult = check_CSS_property("border-top-right-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-013.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-013.xht new file mode 100644 index 0000000000..77ade56ab1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-013.xht @@ -0,0 +1,57 @@ +<!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 Test: Borders. Border-top-right-radius using two length values: 40pt 2pc</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <meta name="assert" content="To verify border-top-right-radius property sets to two length values (with different units), works fine"/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + border-top-right-radius: 40pt 2pc; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p id="testdetails"> + </p> + <p> + There should be a box with a rounded top right corner.</p> + <ul> + <li>PASS if only top right corner is rounded.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <div id="test"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "53px 32px"; + + var testResult = check_CSS_property("border-top-right-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-014.xht b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-014.xht new file mode 100644 index 0000000000..ad16042675 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-014.xht @@ -0,0 +1,64 @@ +<!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 Test: Borders. Border-top-right-radius using two length values: 50px -25px</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta http-equiv="Content-Style-Type" content="text/css"/> + <meta http-equiv="Content-Script-Type" content="text/javascript"/> + <link rel="author" title="Nokia" href="http://www.nokia.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"/> + <link rel="match" href="border-radius-001-ref.xht" /> + <meta name="assert" content="To verify if one length value is negative for border-top-right-radius, then the element is not rounded."/> + <style type="text/css"> + /* <![CDATA[ */ + div + { + border:2px solid #a1a1a1; + background:#dddddd; + width:200px; + height: 100px; + } + #test + { + border-top-right-radius: 50px -25px; + } + /* ]]> */ + </style> +<!-- + <script type="text/javascript" src="js/css3_test_helper.js"></script> +--> + </head> + <body> + <p> + There should be two boxes with no rounded corners. + </p> + <!-- PASS AND FAIL CRITERIA ARE IN THE LIST BELOW --> + <ul> + <li>PASS if the two boxes below are the same.</li> + <li>FAIL if the output is not as expected.</li> + </ul> + + <!-- PLACE TEST CONTENT FROM HERE --> + <div id="test"></div> + <p><br/></p> + <div id="reference"></div> +<!-- + <script type="text/javascript"> + /* <![CDATA[ */ + var expectedBorderRadius = "0px"; + + var testResult = check_CSS_property("border-top-right-radius", expectedBorderRadius); + + /* if (testResult.pass) + // This portion of the code has been removed to ensure that the test case is not automated + else { + // This portion of the code has been removed to ensure that the test case is not automated + } */ + + if (top.FrameEnabled) top.fnLog(testResult); + /* ]]> */ + </script> +--> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-values-004.htm b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-values-004.htm new file mode 100644 index 0000000000..bd2bf51e04 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-right-radius-values-004.htm @@ -0,0 +1,113 @@ +<!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 Test: Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box." /> + <style type="text/css"> + div + { + width: 100px; + height: 60px; + border: 20px solid; + } + td + { + width: 150px; + height: 120px; + } + .red + { + border-color: red; + } + .pos + { + margin-top: -100px; + } + .reference1 + { + border-top-right-radius: 20px 97px; + } + .test1 + { + border-top-right-radius: 20px 97%; + } + .reference2 + { + border-top-right-radius: 20px 51px; + } + .test2 + { + border-top-right-radius: 20px 51%; + } + .reference3 + { + border-top-right-radius: 20px 25px; + } + .test3 + { + border-top-right-radius: 20px 25%; + } + .reference4 + { + border-top-right-radius: 20px 11px; + } + .test4 + { + border-top-right-radius: 20px 11%; + } + .reference5 + { + border-top-right-radius: 20px 7px; + } + .test5 + { + border-top-right-radius: 20px 7%; + } + .reference6 + { + border-top-right-radius: 20px 5px; + } + .test6 + { + border-top-right-radius: 20px 5%; + } + </style> + </head> + <body> + <p>Test passes if the top right corner of each of the boxes is curved and if there is no red visible on the page.</p> + <table> + <tr> + <td> + <div class="red reference1"></div> + <div class="pos test1"></div> + </td> + <td> + <div class="red reference2"></div> + <div class="pos test2"></div> + </td> + </tr> + <tr> + <td> + <div class="red reference3"></div> + <div class="pos test3"></div> + </td> + <td> + <div class="red reference4"></div> + <div class="pos test4"></div> + </td> + </tr> + <tr> + <td> + <div class="red reference5"></div> + <div class="pos test5"></div> + </td> + <td> + <div class="red reference6"></div> + <div class="pos test6"></div> + </td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-width-medium.html b/testing/web-platform/tests/css/css-backgrounds/border-top-width-medium.html new file mode 100644 index 0000000000..74c7d943f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-width-medium.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-top-width: medium equals 3px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-top-width-3px-ref.html"> +<meta name="assert" content="The 'medium' keyword for 'border-top-width' is 3px." /> +<style> + .red-if-too-thin { height: 3px; background: red; } + .cb { position: relative; } + .red-if-too-thick { height: 20px; background: red; } + .overlap-red-if-too-thick { height: 20px; background: white; position: absolute; top: 3px; width: 100%; } + .border-test { border-top-style: solid; border-top-width: medium; margin-top: -3px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div> + <div class=cb> + <div class=border-test></div> + <div class=red-if-too-thick></div> + <div class=overlap-red-if-too-thick></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-width-thick.html b/testing/web-platform/tests/css/css-backgrounds/border-top-width-thick.html new file mode 100644 index 0000000000..f67c5e22ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-width-thick.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-top-width: thick equals 5px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-top-width-5px-ref.html"> +<meta name="assert" content="The 'thick' keyword for 'border-top-width' is 5px." /> +<style> + .red-if-too-thin { height: 5px; background: red; } + .cb { position: relative; } + .red-if-too-thick { height: 20px; background: red; } + .overlap-red-if-too-thick { height: 20px; background: white; position: absolute; top: 5px; width: 100%; } + .border-test { border-top-style: solid; border-top-width: thick; margin-top: -5px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div> + <div class=cb> + <div class=border-test></div> + <div class=red-if-too-thick></div> + <div class=overlap-red-if-too-thick></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-top-width-thin.html b/testing/web-platform/tests/css/css-backgrounds/border-top-width-thin.html new file mode 100644 index 0000000000..38597f5a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-top-width-thin.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-top-width: thin equals 1px</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/border-top-width-1px-ref.html"> +<meta name="assert" content="The 'thin' keyword for 'border-top-width' is 1px." /> +<style> + .red-if-too-thin { height: 1px; background: red; } + .cb { position: relative; } + .red-if-too-thick { height: 20px; background: red; } + .overlap-red-if-too-thick { height: 20px; background: white; position: absolute; top: 1px; width: 100%; } + .border-test { border-top-style: solid; border-top-width: thin; margin-top: -1px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div class=red-if-too-thin></div> + <div class=cb> + <div class=border-test></div> + <div class=red-if-too-thick></div> + <div class=overlap-red-if-too-thick></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-cssom.html b/testing/web-platform/tests/css/css-backgrounds/border-width-cssom.html new file mode 100644 index 0000000000..a1276e5362 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-cssom.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: CSSOM for border-*-width: thin, medium, thick</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<meta name="assert" content="getComputedStyle() for 'border-*-width' with values thin, medium, thick, returns 1px, 3px, and 5px, respectively." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.thin { border: solid thin; } +.medium { border: solid medium; } +.thick { border: solid thick; } +</style> +</head> +<body> + <div class=thin data-expected=1px></div> + <div class=medium data-expected=3px></div> + <div class=thick data-expected=5px></div> + <script> + let divs = document.querySelectorAll('div'); + let props = ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width']; + for (let div of divs) { + let style = getComputedStyle(div); + for (let prop of props) { + test(() => { + assert_equals(style.getPropertyValue(prop), div.dataset.expected); + }, `${prop}: ${div.className} is ${div.dataset.expected}`); + } + } + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-pixel-snapping-001-a.html b/testing/web-platform/tests/css/css-backgrounds/border-width-pixel-snapping-001-a.html new file mode 100644 index 0000000000..664e652c2b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-pixel-snapping-001-a.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: border-width pixel snapping</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-width"> +<link rel="mismatch" href="reference/border-width-pixel-snapping-001-ref.html"> +<meta name="assert" content="Test checks that outline-width is floored down when it needs to do pixel snapping (so 1.9px are not the same than 2px)."> +<div style="border: 1.9px solid black; width: 100.2px; height: 100.2px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-pixel-snapping-001-b.html b/testing/web-platform/tests/css/css-backgrounds/border-width-pixel-snapping-001-b.html new file mode 100644 index 0000000000..2bbb4f8b35 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-pixel-snapping-001-b.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: border-width pixel snapping</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-width"> +<link rel="match" href="reference/border-width-pixel-snapping-001-ref.html"> +<meta name="assert" content="Test checks that outline-width is floored down when it needs to do pixel snapping (so 2.1px are the same than 2px)."> +<div style="border: 2.1px solid black; width: 99.8px; height: 99.8px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-a.html b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-a.html new file mode 100644 index 0000000000..d5354a3585 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-a.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: border-width small values</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<link rel="mismatch" href="reference/border-width-small-values-001-ref.html"> +<meta name="assert" content="Tese tests check that small values for border-width (greater than 0px and lower than 1px) are visible."> +<div style="border: 0.1px solid black;">The test passes if this text has a border</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-b.html b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-b.html new file mode 100644 index 0000000000..ccb5004a64 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-b.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: border-width small values</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<link rel="mismatch" href="reference/border-width-small-values-001-ref.html"> +<meta name="assert" content="Tese tests check that small values for border-width (greater than 0px and lower than 1px) are visible."> +<div style="border: 0.25px solid black;">The test passes if this text has a border</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-c.html b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-c.html new file mode 100644 index 0000000000..43651fe231 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-c.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: border-width small values</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<link rel="mismatch" href="reference/border-width-small-values-001-ref.html"> +<meta name="assert" content="Tese tests check that small values for border-width (greater than 0px and lower than 1px) are visible."> +<div style="border: 0.5px solid black;">The test passes if this text has a border</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-d.html b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-d.html new file mode 100644 index 0000000000..11ff8b5c55 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-d.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: border-width small values</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<link rel="mismatch" href="reference/border-width-small-values-001-ref.html"> +<meta name="assert" content="Tese tests check that small values for border-width (greater than 0px and lower than 1px) are visible."> +<div style="border: 0.7px solid black;">The test passes if this text has a border</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-e.html b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-e.html new file mode 100644 index 0000000000..5fc4434983 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-width-small-values-001-e.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: border-width small values</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<link rel="mismatch" href="reference/border-width-small-values-001-ref.html"> +<meta name="assert" content="Tese tests check that small values for border-width (greater than 0px and lower than 1px) are visible."> +<div style="border: 0.9px solid black;">The test passes if this text has a border</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-001.htm b/testing/web-platform/tests/css/css-backgrounds/box-shadow-001.htm new file mode 100644 index 0000000000..1c63b8cb38 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-001.htm @@ -0,0 +1,33 @@ +<!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 Test: Positive value of horizontal offset</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow" /> + <meta name="flags" content="internal" /> + <meta name="assert" content="A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box." /> + <style type="text/css"> + #reference + { + width: 2in; + height: 1in; + background: red; + border: thin solid black; + } + div div + { + width: 1in; + height: 1in; + border: thin solid black; + background: white; + box-shadow: black 96px 0px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="reference"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-002.htm b/testing/web-platform/tests/css/css-backgrounds/box-shadow-002.htm new file mode 100644 index 0000000000..aab6d8284c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-002.htm @@ -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 Test: Positive values for spread distance</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow" /> + <meta name="assert" content="Positive values of the spread distance cause the shadow to grow in all directions by the specified distance." /> + <style type="text/css"> + #reference + { + width: 120px; + height: 120px; + margin-left: 40px; + margin-top: 10px; + background: red; + } + #test + { + width: 100px; + height: 100px; + background: black; + box-shadow: 50px 10px 0 10px; + margin-top: -120px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="reference"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-003.htm b/testing/web-platform/tests/css/css-backgrounds/box-shadow-003.htm new file mode 100644 index 0000000000..41d411bbae --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-003.htm @@ -0,0 +1,42 @@ +<!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 Test: Layering of box shadows</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <meta name="assert" content="Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom." /> + <style type="text/css"> + div + { + height: 96px; + width: 96px; + } + #reference1 + { + box-shadow: orange 30px 30px; + } + #reference2 + { + margin-top: -96px; + box-shadow: blue 20px 20px + } + #reference3 + { + margin-top: -96px; + box-shadow: 10px 10px; + } + #test + { + margin-top: 40px; + box-shadow: 10px 10px, blue 20px 20px, orange 30px 30px; + } + </style> + </head> + <body> + <p>Test passes if two drawings are exactly the same.</p> + <div id="reference1"></div> + <div id="reference2"></div> + <div id="reference3"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-004.htm b/testing/web-platform/tests/css/css-backgrounds/box-shadow-004.htm new file mode 100644 index 0000000000..2f8d073402 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-004.htm @@ -0,0 +1,22 @@ +<!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 Test: Negative value for blur radius</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow" /> + <meta name="assert" content="Negative values for the blur radius of the 'box-shadow' are not allowed." /> + <style type="text/css"> + div + { + width: 1in; + height: 1in; + border: thin solid black; + box-shadow: red 0 10px -10px; + } + </style> + </head> + <body> + <p>Test passes if there is 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/box-shadow-005.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-005.html new file mode 100644 index 0000000000..705ced279d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-005.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test Background: Box-Shadow property</title> + <link rel="author" title="Marc Silverman" href="mailto:silverman@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-005-ref.html"> + <meta name="assert" content="Testing simple drop shadow with the box-shadow property"> + <style type="text/css"> + #shadow-div { + position: absolute; + top: 50px; + left: 5px; + box-shadow: rgba(0,255,0,1) 10px 10px; + background-color: #000; + width: 144px; + height: 144px; + } + #error { + position: absolute; + top: 60px; + left: 15px; + background-color: red; + width: 144px; + height: 144px; + } + </style> +</head> +<body> + <p>The test passes if there is a green drop shadow and no red.</p> + <div id="error"> + </div> + <div id="shadow-div"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-029.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-029.html new file mode 100644 index 0000000000..9592c8af79 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-029.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + + <title>CSS Backgrounds Test: box-shadow and empty box (edge)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <meta content="This test checks that an empty box can have a box shadow." name="assert"> + + <!-- + + <shadow> = inset? && <length>{2,4} && <color>? + + A comma-separated pair of numbers in curly braces {A,B} + indicates that the preceding type, word, or group occurs + at least A and at most B times. + + A question mark (?) indicates that the preceding type, + word, or group is optional (occurs zero or one times). + + The components of each <shadow> are interpreted as follows: + + 1st <length> + Specifies the horizontal offset + of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left. + 2nd <length> + Specifies the vertical offset + of the shadow. A positive value offsets the shadow down, a negative one up. + 4th <length> + Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. + + --> + + <style> + div#green-overlapping-test + { + background-color: red; + height: 0px; + width: 0px; + + box-shadow: green 50px 50px 0px 50px; + } + + div#red-overlapped-reference + { + background-color: red; + height: 100px; + position: relative; + width: 100px; + z-index: -1; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="green-overlapping-test"></div> + + <div id="red-overlapped-reference"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-039.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-039.html new file mode 100644 index 0000000000..614078d599 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-039.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: box-shadow in 3 sub-tests with not inset and Npx 0px</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-039-ref.html"> + + + <!-- + + <shadow> = inset? && <length>{2,4} && <color>? + + A comma-separated pair of numbers in curly braces {A,B} + indicates that the preceding type, word, or group occurs + at least A and at most B times. + + A question mark (?) indicates that the preceding type, + word, or group is optional (occurs zero or one times). + + The components of each <shadow> are interpreted as follows: + + 1st <length> + Specifies the horizontal offset + of the shadow. A positive value draws a shadow that is offset to + the right of the box, a negative length to the left. + + 2nd <length> + Specifies the vertical offset + of the shadow. A positive value offsets the shadow down, a negative one up. + + 4th <length> + Specifies the spread distance. + Positive values cause the shadow to expand in all directions + by the specified radius. + Negative values cause the shadow to contract. + + --> + + <style> + div + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + margin-bottom: 36px; + width: 36px; + } + + /* Npx 0px, zero spread, not-inset */ + div#sub-test1 + { + box-shadow: 36px 0px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* Npx 0px, positive spread, not-inset */ + div#sub-test2 + { + box-shadow: 36px 0px 0px 18px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* Npx 0px, negative spread, not-inset */ + div#sub-test3 + { + box-shadow: 36px 0px 0px -18px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + </style> + + <h3>Not inset and Npx 0px: 36px 0px</h3> + + <div id="sub-test1"></div> + + <div id="sub-test2"></div> + + <div id="sub-test3"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-040.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-040.html new file mode 100644 index 0000000000..e406acc67a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-040.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: box-shadow in 3 sub-tests with not inset and Npx Mpx</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-040-ref.html"> + + + <!-- + + <shadow> = inset? && <length>{2,4} && <color>? + + A comma-separated pair of numbers in curly braces {A,B} + indicates that the preceding type, word, or group occurs + at least A and at most B times. + + A question mark (?) indicates that the preceding type, + word, or group is optional (occurs zero or one times). + + The components of each <shadow> are interpreted as follows: + + 1st <length> + Specifies the horizontal offset + of the shadow. A positive value draws a shadow that is offset to + the right of the box, a negative length to the left. + + 2nd <length> + Specifies the vertical offset + of the shadow. A positive value offsets the shadow down, a negative one up. + + 4th <length> + Specifies the spread distance. + Positive values cause the shadow to expand in all directions + by the specified radius. + Negative values cause the shadow to contract. + + --> + + <style> + div + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + margin-bottom: 54px; + width: 36px; + } + + /* Npx Mpx, zero spread, not-inset */ + div#sub-test4 + { + box-shadow: 36px 18px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* Npx Mpx, positive spread, not-inset */ + div#sub-test5 + { + box-shadow: 36px 18px 0px 18px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* Npx Mpx, negative spread, not-inset */ + div#sub-test6 + { + box-shadow: 36px 18px 0px -18px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + </style> + + <h3>Not inset and Npx Mpx: 36px 18px</h3> + + <div id="sub-test4"></div> + + <div id="sub-test5"></div> + + <div id="sub-test6"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-041.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-041.html new file mode 100644 index 0000000000..f91189bcc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-041.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: box-shadow in 3 sub-tests with inset and Npx 0px</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-041-ref.html"> + + + <!-- + + <shadow> = inset? && <length>{2,4} && <color>? + + A comma-separated pair of numbers in curly braces {A,B} + indicates that the preceding type, word, or group occurs + at least A and at most B times. + + A question mark (?) indicates that the preceding type, + word, or group is optional (occurs zero or one times). + + The components of each <shadow> are interpreted as follows: + + 1st <length> + Specifies the horizontal offset + of the shadow. A positive value draws a shadow that is offset to + the right of the box, a negative length to the left. + + 2nd <length> + Specifies the vertical offset + of the shadow. A positive value offsets the shadow down, a negative one up. + + 4th <length> + Specifies the spread distance. + Positive values cause the shadow to expand in all directions + by the specified radius. + Negative values cause the shadow to contract. + + --> + + <style> + div + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + margin-bottom: 36px; + width: 36px; + } + + /* inset, Npx 0px, zero spread */ + div#sub-test7 + { + box-shadow: inset 18px 0px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* inset, Npx 0px, positive spread */ + div#sub-test8 + { + box-shadow: inset 18px 0px 0px 12px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* inset, Npx 0px, negative spread */ + div#sub-test9 + { + box-shadow: inset 18px 0px 0px -6px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + </style> + + <h3>With inset and Npx 0px: 18px 0px</h3> + + <div id="sub-test7"></div> + + <div id="sub-test8"></div> + + <div id="sub-test9"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-042.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-042.html new file mode 100644 index 0000000000..0e53b36463 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-042.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: box-shadow in 3 sub-tests with inset and Npx Mpx</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-042-ref.html"> + + + <!-- + + <shadow> = inset? && <length>{2,4} && <color>? + + A comma-separated pair of numbers in curly braces {A,B} + indicates that the preceding type, word, or group occurs + at least A and at most B times. + + A question mark (?) indicates that the preceding type, + word, or group is optional (occurs zero or one times). + + The components of each <shadow> are interpreted as follows: + + 1st <length> + Specifies the horizontal offset + of the shadow. A positive value draws a shadow that is offset to + the right of the box, a negative length to the left. + + 2nd <length> + Specifies the vertical offset + of the shadow. A positive value offsets the shadow down, a negative one up. + + 4th <length> + Specifies the spread distance. + Positive values cause the shadow to expand in all directions + by the specified radius. + Negative values cause the shadow to contract. + + --> + + <style> + div + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + margin-bottom: 36px; + width: 36px; + } + + /* inset, Npx Mpx, zero spread */ + div#sub-test10 + { + box-shadow: inset 18px 12px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* inset, Npx Mpx, positive spread */ + div#sub-test11 + { + box-shadow: inset 18px 12px 0px 12px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + + /* inset, Npx Mpx, negative spread */ + div#sub-test12 + { + box-shadow: inset 18px 12px 0px -6px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + } + </style> + + <h3>With inset and Npx Mpx: 18px 12px</h3> + + <div id="sub-test10"></div> + + <div id="sub-test11"></div> + + <div id="sub-test12"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-body.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-body.html new file mode 100644 index 0000000000..88d888a771 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-body.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS box-shadow Test: <body> shadow should look the same regardless of background color</title> + <link rel="author" title="fmalita" href="mailto:fmalita@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-body-ref.html"> + <style type="text/css"> + body { + position: relative; + box-shadow: 0 0 0 4px red; + height: 300px; + width: 600px; + margin: 20px auto; + background-color: white; + } + </style> +</head> +<body></body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-border-radius-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-border-radius-001.html new file mode 100644 index 0000000000..de5060e5b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-border-radius-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: 'border-radius: 50%' with a box-shadow that has a tall and wide spread</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property"> + <link rel="match" href="reference/box-shadow-border-radius-001-ref.html"> + <link rel="mismatch" href="reference/box-shadow-border-radius-001-notref.html"> + + <meta content="" name="flags"> + + <!-- + + [css-backgrounds] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread + https://github.com/w3c/csswg-drafts/issues/7103 + + https://lists.w3.org/Archives/Public/www-archive/2022Sep/att-0012/shadow-radius.html + + --> + + <meta name="fuzzy" content="maxDifference=0-56;totalPixels=0-1192"> + + <style> + div + { + background-color: black; + border-radius: 50%; + box-shadow: black 0 0 0 149px; + height: 2px; + margin: 157px 149px 0px; + width: 2px; + } + + /* + + 149px + + + 2px + + + 149px + ======== + 300px + + */ + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-calc-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-calc-ref.html new file mode 100644 index 0000000000..3a1c1366d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-calc-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style type="text/css"> +div { + width: 100px; + height: 100px; + background-color: blue; + box-shadow: 26px 43px 60px black; +} +</style> +<div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-calc.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-calc.html new file mode 100644 index 0000000000..1401185985 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-calc.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com" /> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow" /> +<link rel="match" href="box-shadow-calc-ref.html" /> +<meta name="assert" content="Test checks whether box-shadow supports calc() values."> +<style type="text/css"> +div { + width: 100px; + height: 100px; + background-color: blue; + box-shadow: calc(1em + 10px) calc(2em + 11px) calc(3em + 12px) black; +} +</style> +<div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-currentcolor-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-currentcolor-ref.html new file mode 100644 index 0000000000..4bb4cbd417 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-currentcolor-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" /> + <style type="text/css"> + div { + padding: 40px; + } + + p { + padding: 2em; + border: 1px solid limegreen; + box-shadow: 10px 5px 5px limegreen; + } + </style> + </head> + <body> + <!-- content of test --> + <div> + <p style="color: limegreen"> + This box should have a green box shadow. + </p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-currentcolor.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-currentcolor.html new file mode 100644 index 0000000000..cdb0b9d9fc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-currentcolor.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'box-shadow' respects 'currentcolor'</title> + <link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" /> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow" /> + <link rel="help" href="https://www.w3.org/TR/css-color-3/#currentcolor" /> + <link rel="match" href="box-shadow-currentcolor-ref.html" /> + <style type="text/css"> + div { + color: transparent; + padding: 40px; + box-shadow: 10px 5px 5px currentcolor; + } + + p { + padding: 2em; + border: 1px solid currentcolor; + box-shadow: inherit; + } + </style> + </head> + <body> + <!-- content of test --> + <div> + <p style="color: limegreen"> + This box should have a green box shadow. + </p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-inset-without-border-radius.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-inset-without-border-radius.html new file mode 100644 index 0000000000..8b2c691ebc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-inset-without-border-radius.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: box-shadow inset without border-radius</title> + + <link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-inset-without-border-radius-ref.html"> + + <meta content="" name="flags"> + + <!-- + + Reviewed by Gérard Talbot on April 9th 2023 + + More info: https://github.com/web-platform-tests/wpt/issues/10013 + + https://github.com/web-platform-tests/wpt/pull/39445 + + --> + + <style> + div + { + border: transparent solid 8px; + display: inline-block; + height: 32px; + margin: 0px 8px 8px 0px; + padding: 16px; + vertical-align: top; + width: 32px; + } + + /* + + An inner box-shadow casts a shadow as if everything outside + the padding edge were opaque. Assuming a spread distance of + zero, its perimeter has the exact same size and shape as the + padding box. The shadow is drawn inside the padding edge only: + it is clipped outside the padding box of the element. + + If a spread distance is defined, the shadow perimeter + defined above is contracted inward (for inner box-shadows) + by insetting the shadow’s straight edges by the spread + distance (and flooring the resulting width/height at zero). + + */ + + div#first-subtest /* inset with NO spread */ + { + box-shadow: black 10px 10px 0px 0px inset; + } + + div#second-subtest /* inset with a 15px spread */ + { + box-shadow: black 10px 10px 0px 15px inset; + } + + div#third-subtest /* inset with NO spread */ + { + box-shadow: black 10px -10px 0px 0px inset; + } + + div#fourth-subtest /* inset with a 15px spread */ + { + box-shadow: black 10px -10px 0px 15px inset; + } + + div#fifth-subtest /* inset with NO spread */ + { + box-shadow: black -10px 10px 0px 0px inset; + } + + div#sixth-subtest /* inset with a 15px spread */ + { + box-shadow: black -10px 10px 0px 15px inset; + } + + div#seventh-subtest /* inset with NO spread */ + { + box-shadow: black -10px -10px 0px 0px inset; + } + + div#eighth-subtest /* inset with a 15px spread */ + { + box-shadow: black -10px -10px 0px 15px inset; + } + </style> + + <div id="first-subtest"></div><div id="second-subtest"></div><div id="third-subtest"></div><div id="fourth-subtest"></div><br> + + <div id="fifth-subtest"></div><div id="sixth-subtest"></div><div id="seventh-subtest"></div><div id="eighth-subtest"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-invalid-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-invalid-001.html new file mode 100644 index 0000000000..acd0bdf41b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-invalid-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: invalid box-shadow declarations</title> + + <!-- + + Created: May 20th 2023 + + Last modified: May 20th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#box-shadow"> + <link rel="match" href="reference/ref-filled-green-100px-square.xht"> + + <meta content="This test checks that 'box-shadow' accepts either the 'none' value or (exclusive or) a comma-separated list of shadows but not both at the same time." name="assert"> + <meta content="invalid" name="flags"> + + <!-- + + <shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset? + + The box-shadow property attaches one or more drop-shadows to + the box. The property accepts either the none value, which + indicates no shadows, or a comma-separated list of shadows, + ordered front to back. + + --> + + <style> + div + { + background-color: red; + box-shadow: green 100px 100px inset; + /* + This inset 'box-shadow' declaration will paint and cover + the inside of the red square. This way, we verify that + the UA actually supports 'box-shadow'. + */ + box-shadow: none, red 0px -100px, red 100px 0px, red 0px 100px, red -100px 0px; /* invalid */ + box-shadow: red 0px -100px, none, red 100px 0px, red 0px 100px, red -100px 0px; /* invalid */ + box-shadow: red 0px -100px, red 100px 0px, none, red 0px 100px, red -100px 0px; /* invalid */ + box-shadow: red 0px -100px, red 100px 0px, red 0px 100px, none, red -100px 0px; /* invalid */ + box-shadow: red 0px -100px, red 100px 0px, red 0px 100px, red -100px 0px, none; /* invalid */ + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-multiple-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-multiple-001.html new file mode 100644 index 0000000000..e95fb6841a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-multiple-001.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds Test: multiple outset box-shadow</title> + + <!-- + + Created: May 18th 2023 + + Last modified: May 18th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#box-shadow"> + <link rel="match" href="reference/box-shadow-multiple-001-ref.html"> + + <meta content="" name="flags"> + + <!-- + + <shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset? + + The box-shadow property attaches one or more drop-shadows to + the box. The property accepts either the none value, which + indicates no shadows, or a comma-separated list of shadows, + ordered front to back. + + Each shadow is given as a <shadow>, represented by 2-4 length + values, an optional color, and an optional inset keyword. + + --> + + <style> + div + { + background-color: yellow; + font-size: 50px; + height: 1em; + margin: 1em auto 2.2em 1em; + width: 1em; + } + + div#multiple + { + box-shadow: purple 0em -1em, blue 1em 0em, fuchsia 0em 1em, orange -1em 0em; + margin-top: 58px; + } + + div#multiple-overlapping1 + { + box-shadow: purple 0em -1em, red 0em -1em, blue 1em 0em, red 1em 0em, fuchsia 0em 1em, red 0em 1em, orange -1em 0em, red -1em 0em; + } + + div#multiple-overlapping2 + { + box-shadow: rgb(128 0 128 / 50%) 0em -1em, rgb(255 255 0 / 50%) 0em -1em, rgb(0 0 255 / 50%) 1em 0em, rgb(255 255 0 / 50%) 1em 0em, rgb(255 0 255 / 50%) 0em 1em, rgb(255 255 0 / 50%) 0em 1em, rgb(255 165 0 / 50%) -1em 0em, rgb(255 255 0 / 50%) -1em 0em; + } + </style> + + <div id="multiple"></div> + + <div id="multiple-overlapping1"></div> + + <div id="multiple-overlapping2"></div> + + <!-- + + The top first 2 are: + + ......... + . . + . . <-purple + . . + ....................... + . . . . + orange-> . . yel . . <-blue + . . low . . + ....................... + . . + . . <-fuchsia + . . + ......... + + The bottom one is: + + ......... + . . + . . <-#BF7F7F + . . + ....................... + . . . . + #FFD23F-> . . yel . . <-#7F7FBF + . . low . . + ....................... + . . + . . <-#FF7FBF + . . + ......... + + --> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-outset-without-border-radius-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-outset-without-border-radius-001.html new file mode 100644 index 0000000000..71735a98ce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-outset-without-border-radius-001.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: box-shadow outset without border-radius</title> + + <link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> + <link rel="match" href="reference/box-shadow-outset-without-border-radius-001-ref.html"> + + <meta content="" name="flags"> + + <!-- + + Reviewed by Gérard Talbot on April 9th 2023 + + More info: https://github.com/web-platform-tests/wpt/issues/10013 + + https://github.com/web-platform-tests/wpt/pull/39445 + + --> + + <style> + div + { + border: transparent solid 8px; + display: inline-block; + height: 32px; + margin: 32px 20px; + padding: 16px; + vertical-align: top; + width: 32px; + } + + /* + + An outer box-shadow casts a shadow as if the border-box + of the element were opaque. Assuming a spread distance + of zero, its perimeter has the exact same size and + shape as the border box. The shadow is drawn outside + the border edge only: it is clipped inside the border-box + of the element. + + If a spread distance is defined, the shadow perimeter + defined above is expanded outward (for outer box-shadows) + by outset withting the shadow’s straight edges by the spread + distance (and flooring the resulting width/height at zero). + + */ + + div#first-subtest /* outset with NO spread */ + { + box-shadow: black 10px 10px 0px 0px; + } + + div#second-subtest /* outset with a 15px spread */ + { + box-shadow: black 10px 10px 0px 15px; + } + + div#third-subtest /* outset with NO spread */ + { + box-shadow: black 10px -10px 0px 0px; + } + + div#fourth-subtest /* outset with a 15px spread */ + { + box-shadow: black 10px -10px 0px 15px; + } + + div#fifth-subtest /* outset with NO spread */ + { + box-shadow: black -10px 10px 0px 0px; + } + + div#sixth-subtest /* outset with a 15px spread */ + { + box-shadow: black -10px 10px 0px 15px; + } + + div#seventh-subtest /* outset with NO spread */ + { + box-shadow: black -10px -10px 0px 0px; + } + + div#eighth-subtest /* outset with a 15px spread */ + { + box-shadow: black -10px -10px 0px 15px; + } + </style> + + <div id="first-subtest"></div><div id="second-subtest"></div><div id="third-subtest"></div><div id="fourth-subtest"></div><br> + + <div id="fifth-subtest"></div><div id="sixth-subtest"></div><div id="seventh-subtest"></div><div id="eighth-subtest"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-001.html new file mode 100644 index 0000000000..2c77838108 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: box-shadow and overlapping of adjacent text</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-layers" > + <link rel="match" href="reference/box-shadow-overlapping-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta content="Box shadows do not affect layout. Box shadows take up no space. Box shadows do not affect or influence normal flow of boxes. Therefore, box shadows can 'collide' with other boxes and can overlap other boxes (inline box or line box) or be overlapped by other boxes. In this test, the text ('PED') is before a left outer box-shadow box and such left outer box-shadow box is wide and wide enough to overlap the text 'PED'." name="assert"> + + <style> + div + { + color: red; + float: left; + font-family: Ahem; + font-size: 100px; + line-height: 1; + } + + span + { + color: green; + box-shadow: -3em 0em; + } + + /* + + omitted colors default to the value of the color property. + + 1st <length> + Specifies the horizontal offset of the shadow. A positive value + draws a shadow that is offset to the right of the box, a negative + length to the left. + + 2nd <length> + Specifies the vertical offset of the shadow. A positive value + offsets the shadow down, a negative one up. + + */ + </style> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>. + + <div>PED<span>PNG</span></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-002.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-002.html new file mode 100644 index 0000000000..60659721fb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-002.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: box-shadow and overlapping of adjacent text</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-layers" > + <link rel="match" href="reference/box-shadow-overlapping-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta content="Box shadows do not affect layout. Box shadows take up no space. Box shadows do not affect or influence normal flow of boxes. Therefore, box shadows can 'collide' with other boxes and can overlap other boxes (inline box or line box) or be overlapped by other boxes. In this test, the text ('PNG') follows a right outer box shadow and therefore overlaps such shadow." name="assert"> + + <style> + div + { + background-color: yellow; + color: green; + float: left; + font-family: Ahem; + font-size: 100px; + line-height: 1; + } + + span + { + box-shadow: 3em 0em red; + } + + /* + + omitted colors default to the value of the color property. + + 1st <length> + Specifies the horizontal offset of the shadow. A positive value + draws a shadow that is offset to the right of the box, a negative + length to the left. + + 2nd <length> + Specifies the vertical offset of the shadow. A positive value + offsets the shadow down, a negative one up. + + */ + </style> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>. + + <div><span>PED</span>PNG</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-003.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-003.html new file mode 100644 index 0000000000..dcae3f0506 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: box-shadow and overlapping of adjacent text</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-layers" > + <link rel="match" href="reference/box-shadow-overlapping-003-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta content="Box shadows do not affect layout. Box shadows take up no space. Box shadows do not affect or influence normal flow of boxes. Therefore, box shadows can 'collide' with other boxes and can overlap other boxes (inline box or line box) or be overlapped by other boxes. In this test, the text ('OVLPED') is from a previous line box and is overlapped by a top outer box shadow box that is tall enough to overlap it entirely." name="assert"> + + <style> + div + { + float: left; + font-family: Ahem; + font-size: 100px; + line-height: 1; + } + + div#previous-line-box + { + color: red; + } + + div#outer-box-shadow + { + box-shadow: 0em -1em; + clear: left; + color: green; + } + + /* + + omitted colors default to the value of the color property. + + 1st <length> + Specifies the horizontal offset of the shadow. A positive value + draws a shadow that is offset to the right of the box, a negative + length to the left. + + 2nd <length> + Specifies the vertical offset of the shadow. A positive value + offsets the shadow down, a negative one up. + + */ + </style> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>. + + <div id="previous-line-box">OVLPED</div> + + <div id="outer-box-shadow">OVLPNG</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-004.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-004.html new file mode 100644 index 0000000000..97b690b956 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-004.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Background and Borders Test: box-shadow and overlapping of adjacent text</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-layers" > + <link rel="match" href="reference/box-shadow-overlapping-003-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <meta content="Box shadows do not affect layout. Box shadows take up no space. Box shadows do not affect or influence normal flow of boxes. Therefore, box shadows can 'collide' with other boxes and can overlap other boxes (inline box or line box) or be overlapped by other boxes. This test checks that the background of the following line box overlaps the box-shadow of an inline non-replaced box whose box-shadow expands onto and over the following line box. In this test, the box shadow of div#outer-box-shadow is red and protudes out and below onto the following line box. But since the glyphs of div#following-line-box are green, then such green color will overlap the red box shadow of div#outer-box-shadow." name="assert"> + + <style> + div + { + color: green; + float: left; + font-family: Ahem; + font-size: 100px; + line-height: 1; + } + + div#outer-box-shadow + { + box-shadow: 0em 1em red; + } + + /* + + 1st <length> + Specifies the horizontal offset of the shadow. A positive value + draws a shadow that is offset to the right of the box, a negative + length to the left. + + 2nd <length> + Specifies the vertical offset of the shadow. A positive value + offsets the shadow down, a negative one up. + + */ + + div#following-line-box + { + clear: left; + } + </style> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>. + + <div id="outer-box-shadow">OVLPED</div> + + <div id="following-line-box">OVLPNG</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-000-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-000-ref.html new file mode 100644 index 0000000000..8e31ec5266 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-000-ref.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<title>Box Shadow Border Radius (Outset)</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<!-- This test is complicated, so leaving the reference code identical to the test, minus colors. Please keep them in sync. --> + +<style> + body > div { + /* Isolate tests from each other */ + position: relative; + width: 100px; + height: 100px; + float: left; + } + div > div { + position: absolute; + box-sizing: border-box; + /* opacity: 0.7; /* uncomment this line for debugging */ + } + + .floor > .test { + color: silver; + } + .trap > .test { + color: transparent; + } + + .floor > .ref { + border: solid transparent; + width: 58px; + height: 58px; + top: 21px; + left: 21px; + } + .trap > .ref { + border: solid silver; + width: 62px; + height: 62px; + top: 19px; + left: 19px; + } + + /* Keep tests centered by (top|left)*2 + (width|height) = 100. + Keep tests consistent spread + (width|height) = 60 + Floor = spread - 2px + Trap = spread + 2px */ + + .once > .test { + border-radius: 10px; + box-shadow: 0 0 0 10px; + /* shadow radius = 20px */ + top: 30px; left: 30px; + width: 40px; height: 40px; + } + .once > .ref { + border-radius: 20px; + } + .once.floor > .ref { + border-width: 8px; + } + .once.trap > .ref { + border-width: 12px; + } + + .twice > .test { + border-radius: 10px; + box-shadow: 0 0 0 5px; + /* shadow radius = 15px */ + top: 25px; left: 25px; + width: 50px; height: 50px; + } + .twice > .ref { + border-radius: 15px; + } + .twice.floor > .ref { + border-width: 3px; + } + .twice.trap > .ref { + border-width: 7px; + } + + .half > .test { + border-radius: 8px; + box-shadow: 0 0 0 16px; + /* shadow radius = 21px */ + top: 36px; left: 36px; + width: 28px; height: 28px; + } + .half > .ref { + border-radius: 21px; + } + .half.floor > .ref { + border-width: 14px; + } + .half.trap > .ref { + border-width: 20px; + } + + .fourth > .test { + border-radius: 5px; + box-shadow: 0 0 0 20px; + /* shadow radius = 14.45px */ + top: 40px; left: 40px; + width: 20px; height: 20px; + } + .fourth > .ref { + border-radius: 15px; + } + .fourth.floor > .ref { + border-width: 18px; + } + .fourth.trap > .ref { + border-width: 23px; + } + + .eighth > .test { + border-radius: 2px; + box-shadow: 0 0 0 16px; + /* shadow radius = 5.28 */ + top: 36px; left: 36px; + width: 28px; height: 28px; + } + .eighth > .ref { + border-radius: 5.28px; + } + .eighth.floor > .ref { + border-width: 14px; + } + .eighth.trap > .ref { + border-width: 18px; + } + + +</style> + +<p>Test passes if there is no red. + +<div class="once floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="once trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="twice floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="twice trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="half floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="half trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="fourth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="fourth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="eighth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="eighth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-000.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-000.html new file mode 100644 index 0000000000..ea6190b57f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-000.html @@ -0,0 +1,183 @@ +<!DOCTYPE html> +<title>Box Shadow Border Radius (Outset)</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape"> +<link rel="match" href="box-shadow-radius-000-ref.html"> +<!-- Allow differences of antialised pixels along rounded edges --> +<meta name="fuzzy" content="0-25;0-90"> + +<style> + body > div { + /* Isolate tests from each other */ + position: relative; + width: 100px; + height: 100px; + float: left; + } + div > div { + position: absolute; + box-sizing: border-box; + /* opacity: 0.7; /* uncomment this line for debugging */ + } + + .floor > .test { + color: silver; + } + .trap > .test { + color: red; + } + + .floor > .ref { + border: solid red; + width: 58px; + height: 58px; + top: 21px; + left: 21px; + } + .trap > .ref { + border: solid silver; + width: 62px; + height: 62px; + top: 19px; + left: 19px; + } + + /* Keep tests centered by (top|left)*2 + (width|height) = 100. + Keep tests consistent spread + (width|height) = 60 + Floor = spread - 2px + Trap = spread + 2px */ + + .once > .test { + border-radius: 10px; + box-shadow: 0 0 0 10px; + /* shadow radius = 20px */ + top: 30px; left: 30px; + width: 40px; height: 40px; + } + .once > .ref { + border-radius: 20px; + } + .once.floor > .ref { + border-width: 8px; + } + .once.trap > .ref { + border-width: 12px; + } + + .twice > .test { + border-radius: 10px; + box-shadow: 0 0 0 5px; + /* shadow radius = 15px */ + top: 25px; left: 25px; + width: 50px; height: 50px; + } + .twice > .ref { + border-radius: 15px; + } + .twice.floor > .ref { + border-width: 3px; + } + .twice.trap > .ref { + border-width: 7px; + } + + .half > .test { + border-radius: 8px; + box-shadow: 0 0 0 16px; + /* shadow radius = 21px */ + top: 36px; left: 36px; + width: 28px; height: 28px; + } + .half > .ref { + border-radius: 21px; + } + .half.floor > .ref { + border-width: 14px; + } + .half.trap > .ref { + border-width: 20px; + } + + .fourth > .test { + border-radius: 5px; + box-shadow: 0 0 0 20px; + /* shadow radius = 14.45px */ + top: 40px; left: 40px; + width: 20px; height: 20px; + } + .fourth > .ref { + border-radius: 15px; + } + .fourth.floor > .ref { + border-width: 18px; + } + .fourth.trap > .ref { + border-width: 23px; + } + + .eighth > .test { + border-radius: 2px; + box-shadow: 0 0 0 16px; + /* shadow radius = 5.28 */ + top: 36px; left: 36px; + width: 28px; height: 28px; + } + .eighth > .ref { + border-radius: 5.28px; + } + .eighth.floor > .ref { + border-width: 14px; + } + .eighth.trap > .ref { + border-width: 18px; + } + + +</style> + +<p>Test passes if there is no red. + +<div class="once floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="once trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="twice floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="twice trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="half floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="half trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="fourth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="fourth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="eighth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="eighth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-001-ref.html new file mode 100644 index 0000000000..96b80aed7b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-001-ref.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<title>Box Shadow Border Radius (Inset)</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<!-- This test is complicated, so leaving the reference code identical to the test, minus colors. Please keep them in sync. --> + +<style> + body > div { + /* Isolate tests from each other */ + position: relative; + width: 100px; + height: 100px; + float: left; + } + div > div { + position: absolute; + box-sizing: border-box; + /* opacity: 0.7; /* uncomment this line for debugging */ + } + + .floor > .test { + color: silver; + } + .trap > .test { + color: transparent; + } + .test { + width: 60px; + height: 60px; + top: 20px; + left: 20px; + } + + .floor > .ref { + border: 8px transparent; + border-style: solid none none solid; + top: 21px; + left: 21px; + width: 59px; + height: 59px; + } + .trap > .ref { + border: 31px silver; + border-style: solid none none solid; + width: 81px; + height: 81px; + } + + /* Keep tests consistent by offset - spread = 10 + Trap radius = 32px + shadow radius (round up) + Floor radius = 8px + shadow radius (round down) */ + + .once > .test { + border-top-left-radius: 10px; + box-shadow: 20px 20px 0 -10px inset; + /* shadow radius = 20px */ + } + .once.floor > .ref { + border-top-left-radius: 28px; + } + .once.trap > .ref { + border-top-left-radius: 52px; + } + + .twice > .test { + border-top-left-radius: 10px; + box-shadow: 15px 15px 0 -5px inset; + /* shadow radius = 15 */ + } + .twice.floor > .ref { + border-top-left-radius: 23px; + } + .twice.trap > .ref { + border-top-left-radius: 47px; + } + + .half > .test { + border-top-left-radius: 8px; + box-shadow: 26px 26px 0 -16px inset; + /* shadow radius = 21px */ + } + .half.floor > .ref { + border-top-left-radius: 29px; + } + .half.trap > .ref { + border-top-left-radius: 53px; + } + + .fourth > .test { + border-top-left-radius: 5px; + box-shadow: 30px 30px 0 -20px inset; + /* shadow radius = 14.45 */ + } + .fourth.floor > .ref { + border-top-left-radius: 22px; + } + .fourth.trap > .ref { + border-top-left-radius: 47px; + } + + .eighth > .test { + border-top-left-radius: 2px; + box-shadow: 26px 26px 0 -16px inset; + /* shadow radius = 5.28 */ + } + .eighth.floor > .ref { + border-top-left-radius: 12px; + } + .eighth.trap > .ref { + border-top-left-radius: 38px; + } + +</style> + +<p>Test passes if there is no red. + +<div class="once floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="once trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="twice floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="twice trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="half floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="half trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="fourth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="fourth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="eighth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="eighth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-001.html new file mode 100644 index 0000000000..9b823a0590 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-radius-001.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Box Shadow Border Radius (Inset)</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape"> +<link rel="match" href="box-shadow-radius-001-ref.html"> + +<style> + body > div { + /* Isolate tests from each other */ + position: relative; + width: 100px; + height: 100px; + float: left; + } + div > div { + position: absolute; + box-sizing: border-box; + /* opacity: 0.7; /* uncomment this line for debugging */ + } + + .floor > .test { + color: silver; + } + .trap > .test { + color: red; + } + .test { + width: 60px; + height: 60px; + top: 20px; + left: 20px; + } + + .floor > .ref { + border: 8px red; + border-style: solid none none solid; + top: 21px; + left: 21px; + width: 59px; + height: 59px; + } + .trap > .ref { + border: 31px silver; + border-style: solid none none solid; + width: 81px; + height: 81px; + } + + /* Keep tests consistent by offset - spread = 10 + Trap radius = 32px + shadow radius (round up) + Floor radius = 8px + shadow radius (round down) */ + + .once > .test { + border-top-left-radius: 10px; + box-shadow: 20px 20px 0 -10px inset; + /* shadow radius = 20px */ + } + .once.floor > .ref { + border-top-left-radius: 28px; + } + .once.trap > .ref { + border-top-left-radius: 52px; + } + + .twice > .test { + border-top-left-radius: 10px; + box-shadow: 15px 15px 0 -5px inset; + /* shadow radius = 15 */ + } + .twice.floor > .ref { + border-top-left-radius: 23px; + } + .twice.trap > .ref { + border-top-left-radius: 47px; + } + + .half > .test { + border-top-left-radius: 8px; + box-shadow: 26px 26px 0 -16px inset; + /* shadow radius = 21px */ + } + .half.floor > .ref { + border-top-left-radius: 29px; + } + .half.trap > .ref { + border-top-left-radius: 53px; + } + + .fourth > .test { + border-top-left-radius: 5px; + box-shadow: 30px 30px 0 -20px inset; + /* shadow radius = 14.45 */ + } + .fourth.floor > .ref { + border-top-left-radius: 22px; + } + .fourth.trap > .ref { + border-top-left-radius: 47px; + } + + .eighth > .test { + border-top-left-radius: 2px; + box-shadow: 26px 26px 0 -16px inset; + /* shadow radius = 5.28 */ + } + .eighth.floor > .ref { + border-top-left-radius: 12px; + } + .eighth.trap > .ref { + border-top-left-radius: 38px; + } + +</style> + +<p>Test passes if there is no red. + +<div class="once floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="once trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="twice floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="twice trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="half floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="half trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="fourth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="fourth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> + +<div class="eighth floor"> + <div class="ref"></div> + <div class="test"></div> +</div> +<div class="eighth trap"> + <div class="test"></div> + <div class="ref"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow-table-border-collapse-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow-table-border-collapse-001.html new file mode 100644 index 0000000000..c6c50b73bd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-table-border-collapse-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Box-shadow Test: an HTML <table> with 'border-collapse: collapse'</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-layers"> + <link rel="match" href="reference/box-shadow-table-border-collapse-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <!-- + + created: 2017 + modified: May 23rd 2020 + + Bug 1050297: Box-shadow of a table disappears when its border-collapse is set to collapse + https://connect.microsoft.com/IE/Feedback/Details/1050297 + + Sky6t user page at wikipedia + https://en.wikipedia.org/wiki/User:Sky6t/sandbox#Tables + + --> + + <meta content="This test checks that 'box-shadow' applies to table element with 'border-collapse' set to 'collapse' as long as row borders do not have different border thicknesses. In this test, the left border of both table rows have the same thickness (30px) and the right border of both table rows have the same thickness (30px)." name="assert"> + + <style> + table + { + border: red solid 29px; + border-collapse: collapse; + box-shadow: 20px 20px darkgray; + color: orange; + font-family: Ahem; + font-size: 50px; + line-height: 1; + table-layout: fixed; + width: 160px; + } + + tr + { + border-color: blue; + border-style: solid; + } + + tr#top-row + { + + border-width: 30px 30px 0px; + } + + tr#bottom-row + { + border-width: 0px 30px 30px; + } + + td + { + padding: 0; + } + </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. + + <table> + + <tr id="top-row"><td>1<td>2 + + <tr id="bottom-row"><td>3<td>4 + + </table> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/box-shadow-blur-definition-001.xht b/testing/web-platform/tests/css/css-backgrounds/box-shadow/box-shadow-blur-definition-001.xht new file mode 100644 index 0000000000..e6ae0a2e90 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/box-shadow-blur-definition-001.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: blur computation for box-shadow</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"/> + <meta name="assert" content="the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius" /> + <style type="text/css"> + div.stripecontainer { + width: 600px; + height: 30px; + border: medium solid blue; + } + div.refimage, div.blurcontainer { + width: 600px; + height: 10px; + } + div.refimage img { + display: block; + } + div.blurcontainer { position: relative; overflow: hidden } + div.blur { + position: absolute; + width: 2000px; + height: 2010px; + top: -1000px; /* places 1000px both above and below container */ + left: -2000px; /* places right edge at left of container */ + box-shadow: 300px 0 100px black; + } + </style> + </head> + <body> + <p>The following test should contain three grayscale stripes, each 10 + pixels tall, with no space between them, but all enclosed within a + blue border. At all points, the middle stripe must be <strong>the + same color as or darker than</strong> the top stripe, and <strong>the + same color as or lighter than</strong> the bottom stripe. (This tests + that the blurring algorithm produces results within 5% of a Gaussian + blur.)</p> + <div class="stripecontainer"> + <div class="refimage"><img height="10" width="600" src="support/box-shadow-blur-definition-001-light-bound.png" alt="[reference stripe image]" /></div> + <div class="blurcontainer"><div class="blur"></div></div> + <div class="refimage"><img height="10" width="600" src="support/box-shadow-blur-definition-001-dark-bound.png" alt="[reference stripe image]" /></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-001-ref.html new file mode 100644 index 0000000000..66951d44b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .piece { + position: absolute; + left: 5px; + top: 0; + width: 95px; + height: 100px; + border: solid; + } + .start { + top: 5px; + height: 95px; + } +</style> +<div style="position:relative; margin:50px;"> + <div class="piece start" style="border-width:0 5px 0 0"></div> + <div class="piece" style="margin-left:120px; border-width:0 5px 0 0;"></div> + <div class="piece" style="margin-left:240px; border-width:0 5px 5px 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-001.html new file mode 100644 index 0000000000..1c7193fa7b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402736"> +<link rel="match" href="slice-block-fragmentation-001-ref.html"> +<div style="margin:50px; columns:3; column-fill:auto; gap:20px; width:340px; height:100px;"> + <div style="box-shadow:5px 5px black; height:300px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-002-ref.html new file mode 100644 index 0000000000..1453d544c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .piece { + position: absolute; + left: -5px; + top: 0; + width: 95px; + height: 100px; + border: solid; + } + .end { + height: 95px; + } +</style> +<div style="position:relative; margin:50px;"> + <div class="piece" style="top:-5px; border-width:5px 0 0 5px;"></div> + <div class="piece" style="margin-left:120px; border-width:0 0 0 5px;"></div> + <div class="piece end" style="margin-left:240px; border-width:0 0 0 5px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-002.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-002.html new file mode 100644 index 0000000000..b645ed82ea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402736"> +<link rel="match" href="slice-block-fragmentation-002-ref.html"> +<div style="margin:50px; columns:3; column-fill:auto; gap:20px; width:340px; height:100px;"> + <div style="box-shadow:-5px -5px black; height:300px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-003-ref.html new file mode 100644 index 0000000000..a58e810174 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-003-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .piece { + position: absolute; + left: -8px; + top: 0; + width: 100px; + height: 100px; + border: solid; + } +</style> +<div style="position:relative; margin:50px;"> + <div class="piece" style="top:-8px; border-width:8px 12px 0 8px;"></div> + <div class="piece" style="margin-left:140px; border-width:0 12px 0 8px;"></div> + <div class="piece" style="margin-left:280px; border-width:0 12px 12px 8px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-003.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-003.html new file mode 100644 index 0000000000..4fca18bfdd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-block-fragmentation-003.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402736"> +<link rel="match" href="slice-block-fragmentation-003-ref.html"> +<div style="margin:50px; columns:3; column-fill:auto; gap:40px; width:380px; height:100px;"> + <div style="box-shadow:2px 2px 0 10px black; width:100px; height:300px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-001-ref.html new file mode 100644 index 0000000000..e116d81691 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<div style="font:16px/40px Ahem; color:cyan;"> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:5px 0 -5px 5px; border:solid black; border-width:0 0 5px 0;"></div> + </span> + <br> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:5px 0 -5px 0; border:solid black; border-width:0 0 5px 0;"></div> + </span> + <br> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:5px -5px -5px 0; border:solid black; border-width:0 5px 5px 0;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-001.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-001.html new file mode 100644 index 0000000000..46eab59ab2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402736"> +<link rel="match" href="slice-inline-fragmentation-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<div style="font:16px/40px Ahem; color:cyan;"> + <span style="box-shadow:5px 5px black;"> + pppÉÉÉ <br> + pppÉÉÉ <br> + pppÉÉÉ + </span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-002-ref.html new file mode 100644 index 0000000000..01bbf54212 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-002-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<div style="font:16px/40px Ahem; color:cyan;"> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:-5px 0 5px -5px; border:solid black; border-width:5px 0 0 5px;"></div> + </span> + <br> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:-5px 0 5px 0; border:solid black; border-width:5px 0 0 0;"></div> + </span> + <br> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:-5px 5px 5px 0; border:solid black; border-width:5px 0 0 0;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-002.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-002.html new file mode 100644 index 0000000000..516abcf2a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402736"> +<link rel="match" href="slice-inline-fragmentation-002-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<div style="font:16px/40px Ahem; color:cyan;"> + <span style="box-shadow:-5px -5px black;"> + pppÉÉÉ <br> + pppÉÉÉ <br> + pppÉÉÉ + </span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-003-ref.html new file mode 100644 index 0000000000..4c1954b3e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-003-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<div style="font:16px/40px Ahem; color:cyan;"> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:-8px 0 -12px -8px; border:solid black; border-width:8px 0 12px 8px;"></div> + </span> + <br> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:-8px 0 -12px 0; border:solid black; border-width:8px 0 12px 0;"></div> + </span> + <br> + <span style="position:relative;"> + pppÉÉÉ + <div style="position:absolute; inset:-8px -12px -12px 0; border:solid black; border-width:8px 12px 12px 0;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-003.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-003.html new file mode 100644 index 0000000000..336c01f5ba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/slice-inline-fragmentation-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402736"> +<link rel="match" href="slice-inline-fragmentation-003-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<div style="font:16px/40px Ahem; color:cyan;"> + <span style="box-shadow:2px 2px 0 10px black;"> + pppÉÉÉ <br> + pppÉÉÉ <br> + pppÉÉÉ + </span> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/support/box-shadow-blur-definition-001-dark-bound.png b/testing/web-platform/tests/css/css-backgrounds/box-shadow/support/box-shadow-blur-definition-001-dark-bound.png Binary files differnew file mode 100644 index 0000000000..695f414ad8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/support/box-shadow-blur-definition-001-dark-bound.png diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/support/box-shadow-blur-definition-001-light-bound.png b/testing/web-platform/tests/css/css-backgrounds/box-shadow/support/box-shadow-blur-definition-001-light-bound.png Binary files differnew file mode 100644 index 0000000000..4f680b4bcb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/support/box-shadow-blur-definition-001-light-bound.png diff --git a/testing/web-platform/tests/css/css-backgrounds/box-shadow/tools/box-shadow-blur-definition-001-image-generator.html b/testing/web-platform/tests/css/css-backgrounds/box-shadow/tools/box-shadow-blur-definition-001-image-generator.html new file mode 100644 index 0000000000..8a48fe357b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow/tools/box-shadow-blur-definition-001-image-generator.html @@ -0,0 +1,144 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>image generator for box-shadow tests</title> +<meta charset="UTF-8"> +<!-- + +This file uses canvas to generate the images used (and checked in to +the repository) for these tests. + +Since the tests are blurring a very tall (relative to the Gaussian +kernel) straight boundary, we can use a one dimensional Gaussian +function to generate the image. + +We're blurring a space that has black on the left 300 pixels and white +on the right 300 pixels. We treat pixel edges as 0, 1, 2, ..., 600 and +pixel centers as 0.5, 1.5, ..., 599.5. + +Therefore we want the cumulative gaussian, with 5% slop, rounded using +floor or ceiling to provide *extra* tolerance. This means the color +values for each pixel should be the output of the following R commands: + +floor(pmax(0, pnorm(seq(0,599)+0.5, mean=300, sd=50) - 0.05) * 255) +ceiling(pmin(1, pnorm(seq(0,599)+0.5, mean=300, sd=50) + 0.05) * 255) + +--> +<script> +var darker = [ + // output of + // floor(pmax(0, pnorm(seq(0,599)+0.5, mean=300, sd=50) - 0.05) * 255) + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 1, 2, 2, 3, 3, 4, 5, 5, 6, 7, 8, 9, 9, 10, 11, 12, 13, 14, + 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 28, 29, 30, 32, 33, 34, + 36, 37, 39, 40, 42, 43, 45, 46, 48, 49, 51, 53, 54, 56, 58, 59, 61, 63, + 65, 66, 68, 70, 72, 74, 76, 77, 79, 81, 83, 85, 87, 89, 91, 93, 95, 97, + 99, 101, 103, 105, 107, 109, 111, 113, 115, 117, 119, 121, 123, 125, + 127, 129, 131, 133, 135, 137, 139, 141, 143, 145, 147, 149, 151, 153, + 155, 157, 159, 160, 162, 164, 166, 168, 169, 171, 173, 174, 176, 178, + 179, 181, 182, 184, 185, 187, 188, 190, 191, 193, 194, 195, 197, 198, + 199, 201, 202, 203, 204, 205, 207, 208, 209, 210, 211, 212, 213, 214, + 215, 216, 217, 218, 218, 219, 220, 221, 222, 222, 223, 224, 224, 225, + 226, 226, 227, 227, 228, 229, 229, 230, 230, 231, 231, 232, 232, 232, + 233, 233, 234, 234, 234, 235, 235, 235, 236, 236, 236, 236, 237, 237, + 237, 237, 238, 238, 238, 238, 238, 238, 239, 239, 239, 239, 239, 239, + 239, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 241, 241, 241, + 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, + 241, 241, 241, 241, 241, 241, 241, 241, 241, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, + 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242 +]; + +var lighter = [ + // output of + // ceiling(pmin(1, pnorm(seq(0,599)+0.5, mean=300, sd=50) + 0.05) * 255) + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, + 13, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, + 14, 14, 14, 14, 14, 14, 14, 14, 14, 15, 15, 15, 15, 15, 15, 15, 15, 15, + 15, 16, 16, 16, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, + 19, 19, 19, 19, 20, 20, 20, 21, 21, 21, 22, 22, 23, 23, 23, 24, 24, 25, + 25, 26, 26, 27, 28, 28, 29, 29, 30, 31, 31, 32, 33, 33, 34, 35, 36, 37, + 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, + 57, 58, 60, 61, 62, 64, 65, 67, 68, 70, 71, 73, 74, 76, 77, 79, 81, 82, + 84, 86, 87, 89, 91, 93, 95, 96, 98, 100, 102, 104, 106, 108, 110, 112, + 114, 116, 118, 120, 122, 124, 126, 128, 130, 132, 134, 136, 138, 140, + 142, 144, 146, 148, 150, 152, 154, 156, 158, 160, 162, 164, 166, 168, + 170, 172, 174, 176, 178, 179, 181, 183, 185, 187, 189, 190, 192, 194, + 196, 197, 199, 201, 202, 204, 206, 207, 209, 210, 212, 213, 215, 216, + 218, 219, 221, 222, 223, 225, 226, 227, 228, 230, 231, 232, 233, 234, + 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 246, 247, + 248, 249, 250, 250, 251, 252, 252, 253, 253, 254, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, + 255, 255, 255, 255, 255, 255 +] + +function append_link(arr, name) { + if (arr.length != 600) { + return; + } + var canvas = document.createElement("canvas"); + canvas.setAttribute("width", 600); + canvas.setAttribute("height", 10); + var cx = canvas.getContext("2d"); + for (var x = 0; x < 600; ++x) { + var color = arr[x]; + cx.fillStyle = "rgb(" + color + "," + color + "," + color + ")"; + cx.fillRect(x, 0, 1, 10); + } + + var a = document.createElement("a"); + a.setAttribute("href", canvas.toDataURL("image/png", "")); + a.appendChild(document.createTextNode(name)); + var p = document.createElement("p"); + p.appendChild(a); + document.body.appendChild(p); +} + +function run() { + append_link(darker, "box-shadow-blur-definition-001-dark-bound.png"); + append_link(lighter, "box-shadow-blur-definition-001-light-bound.png"); +} + +window.addEventListener("load", run); +</script> +</head> +<body> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/child-move-reveals-parent-background-ref.html b/testing/web-platform/tests/css/css-backgrounds/child-move-reveals-parent-background-ref.html new file mode 100644 index 0000000000..10324966ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/child-move-reveals-parent-background-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> + #parent { + width: 150px; + height: 150px; + background-color: green; + } +</style> +<p>There should be a green square below.</p> +<div id="parent"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/child-move-reveals-parent-background.html b/testing/web-platform/tests/css/css-backgrounds/child-move-reveals-parent-background.html new file mode 100644 index 0000000000..e369eccd07 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/child-move-reveals-parent-background.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Child moves and reveals previously obscured background of the parent</title> +<link rel="match" href="child-move-reveals-parent-background-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds"> +<script src="/common/reftest-wait.js"></script> +<style> + #parent { + width: 150px; + height: 150px; + background-color: green; + } + #child { + width: 150px; + height: 150px; + background-color: white; + position: relative; + } +</style> +<p>There should be a green square below.</p> +<div id="parent"> + <div id="child"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + child.style.left = '150px'; + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/color-behind-images.htm b/testing/web-platform/tests/css/css-backgrounds/color-behind-images.htm new file mode 100644 index 0000000000..d21da64cd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-behind-images.htm @@ -0,0 +1,24 @@ +<!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 Test: Background color is drawn behind images</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-color" /> + <meta name="assert" content="Background color is drawn behind any number of background images." /> + <style type="text/css"> + div + { + width: 250px; + height: 250px; + background-image: url("support/blue_color.png"), url("support/orange_color.png"), url("support/white_color.png"); + background-repeat: no-repeat; + background-position: 30px 30px, 60px 60px, 90px 90px; + background-color: black; + } + </style> + </head> + <body> + <p>Test passes if blue, orange and white boxes are visible on a larger black box.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-expected.xht b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-expected.xht new file mode 100644 index 0000000000..05a1379448 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-expected.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/color-mix-currentcolor-background-repaint-parent-expected.xht b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-parent-expected.xht new file mode 100644 index 0000000000..05a1379448 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-parent-expected.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/color-mix-currentcolor-background-repaint-parent.html b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-parent.html new file mode 100644 index 0000000000..af89454694 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-parent.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>currentColor in color-mix() used in background-color repaints properly when parent color changes</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #container { + color: red; + } + + #container.green { + color: green; + } + + #target { + background-color: color-mix(in hsl, transparent 0%, currentColor 100%); + width: 100px; + height: 100px; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="container"> + <div id="target"></div> +</div> + +<script src="/web-animations/testcommon.js"></script> +<script> + addEventListener("load", async () => { + // crbug.com/1378671: Screenshot can be taken while compositor commits are + // still being deferred for first contentful paint (FCP). Wait for FCP + // before starting the test. + await waitForCompositorReady(); + requestAnimationFrame(() => { + container.classList.add("green"); + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint.html b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint.html new file mode 100644 index 0000000000..e584c4f9a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>currentColor in color-mix() used in background-color repaints properly when color changes</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #target { + color: red; + background-color: color-mix(in hsl, transparent 0%, currentColor 100%); + width: 100px; + height: 100px; + } + + #target.green { + color: green; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="target"></div> + +<script src="/web-animations/testcommon.js"></script> +<script> + addEventListener("load", async () => { + // crbug.com/1378671: Screenshot can be taken while compositor commits are + // still being deferred for first contentful paint (FCP). Wait for FCP + // before starting the test. + await waitForCompositorReady(); + requestAnimationFrame(() => { + target.classList.add("green"); + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint-parent.html b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint-parent.html new file mode 100644 index 0000000000..a8d55ace8f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint-parent.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>currentColor in color-mix() used in border repaints properly when parent color changes</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #container { + color: red; + } + + #container.green { + color: green; + } + + #target { + border: 50px solid color-mix(in hsl, transparent 0%, currentColor 100%); + width: 0; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="container"> + <div id="target"></div> +</div> + +<script src="/web-animations/testcommon.js"></script> +<script> + addEventListener("load", async () => { + // crbug.com/1378671: Screenshot can be taken while compositor commits are + // still being deferred for first contentful paint (FCP). Wait for FCP + // before starting the test. + await waitForCompositorReady(); + requestAnimationFrame(() => { + container.classList.add("green"); + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint.html b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint.html new file mode 100644 index 0000000000..aeacd72d3d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>currentColor in color-mix() used in border repaints properly when color changes</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #target { + color: red; + border: 50px solid color-mix(in hsl, transparent 0%, currentColor 100%); + width: 0; + } + + #target.green { + color: green; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="target"></div> + +<script src="/web-animations/testcommon.js"></script> +<script> + + addEventListener("load", async () => { + // crbug.com/1378671: Screenshot can be taken while compositor commits are + // still being deferred for first contentful paint (FCP). Wait for FCP + // before starting the test. + await waitForCompositorReady(); + requestAnimationFrame(() => { + target.classList.add("green"); + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-expected.xht b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-expected.xht new file mode 100644 index 0000000000..05a1379448 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-expected.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/color-mix-currentcolor-outline-repaint-parent-expected.xht b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-parent-expected.xht new file mode 100644 index 0000000000..05a1379448 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-parent-expected.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/color-mix-currentcolor-outline-repaint-parent.html b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-parent.html new file mode 100644 index 0000000000..e138805606 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-parent.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>currentColor in color-mix() used in outline repaints properly when parent color changes</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #container { + color: red; + } + + #container.green { + color: green; + } + + #target { + outline: 50px solid color-mix(in hsl, transparent 0%, currentColor 100%); + outline-offset: -50px; + width: 100px; + height: 100px; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="container"> + <div id="target"></div> +</div> + +<script src="/web-animations/testcommon.js"></script> +<script> + addEventListener("load", async () => { + // crbug.com/1378671: Screenshot can be taken while compositor commits are + // still being deferred for first contentful paint (FCP). Wait for FCP + // before starting the test. + await waitForCompositorReady(); + requestAnimationFrame(() => { + container.classList.add("green"); + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint.html b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint.html new file mode 100644 index 0000000000..87f87b0edb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>currentColor in color-mix() used in outline repaints properly when color changes</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #target { + color: red; + outline: 50px solid color-mix(in hsl, transparent 0%, currentColor 100%); + outline-offset: -50px; + width: 100px; + height: 100px; + } + + #target.green { + color: green; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="target"></div> + +<script src="/web-animations/testcommon.js"></script> +<script> + addEventListener("load", async () => { + // crbug.com/1378671: Screenshot can be taken while compositor commits are + // still being deferred for first contentful paint (FCP). Wait for FCP + // before starting the test. + await waitForCompositorReady(); + requestAnimationFrame(() => { + target.classList.add("green"); + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css-border-radius-001.html b/testing/web-platform/tests/css/css-backgrounds/css-border-radius-001.html new file mode 100644 index 0000000000..8b0e2e9a36 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css-border-radius-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS border-radius Test</title> + <link rel="author" title="tmd" href="mailto:weisong4413@126.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"> + <link rel="match" href="reference/css-border-radius-001-ref.html"> + <!-- Allow differences of antialised pixels along rounded edges --> + <meta name="fuzzy" content="maxDifference=0-116; totalPixels=0-8035"> + <style type="text/css"> + .blueSquare{ + position: absolute; + top:50px; + left:50px; + width: 100px; + height: 100px; + background-color:rgba(0, 0, 255, 1); + } + .greenSquare { + position: absolute; + top:50px; + left:50px; + width: 100px; + height: 100px; + border-radius: 50%; + background-color:rgba(0, 255, 0, 1); + } + .container { + position: absolute; + } + </style> +</head> +<body> + <p>The test passes if the green circle is inscribed in the blue square.</p> + <div class="container"> + <!-- This is the square that has a inscribed circle if the test passes --> + <div id="blue" class="blueSquare"></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/css-box-shadow-001.html b/testing/web-platform/tests/css/css-backgrounds/css-box-shadow-001.html new file mode 100644 index 0000000000..3a7f268ec5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css-box-shadow-001.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS box-shadow Test</title> + <link rel="author" title="tmd" href="mailto:weisong4413@126.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"> + <link rel="match" href="reference/css-box-shadow-ref-001.html"> + <meta name="fuzzy" content="maxDifference=0-56; totalPixels=0-250"> + <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> + <input type="button" value="Border radius?" onclick="fun_radius()"> + <script> + var have_radius=true; + var red=document.getElementById("red"); + var green=document.getElementById("green"); + function fun_radius(){ + if(have_radius){ + red.style.borderBottomRightRadius="0px"; + red.style.borderTopLeftRadius="0px"; + green.style.borderBottomRightRadius="0px"; + green.style.borderTopLeftRadius="0px"; + have_radius=false; + }else{ + red.style.borderBottomRightRadius="60px"; + red.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/css3-background-clip-border-box.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip-border-box.html new file mode 100644 index 0000000000..e07fd53e17 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip-border-box.html @@ -0,0 +1,56 @@ +<!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-08-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> + <link rel="match" href="reference/css3-background-clip-border-box-ref.html" /> + <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: red; + } + #div2 { + top: 15px; + left: 15px; + right: 15px; + bottom: 15px; + background-color: yellow; + } + #div3 { + top: 0; + left: 0; + right: 0; + bottom: 0; + border: solid 15px transparent; + padding: 15px; + background-color: green; + background-clip: border-box; + } + </style> + </head> + <body> + + <p> + The test passes if there is only one green box. + </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/css3-background-clip-content-box.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip-content-box.html new file mode 100644 index 0000000000..bb707a5bf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip-content-box.html @@ -0,0 +1,55 @@ +<!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-08-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> + <link rel="match" href="reference/css3-background-clip-content-box-ref.html" /> + <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: 0; + left: 0; + right: 0; + bottom: 0; + border: solid 15px transparent; + padding: 15px; + background-color: yellow; + background-clip: content-box; + } + </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/css3-background-clip-padding-box.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip-padding-box.html new file mode 100644 index 0000000000..7009f7b26a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip-padding-box.html @@ -0,0 +1,55 @@ +<!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-08-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> + <link rel="match" href="reference/css3-background-clip-padding-box-ref.html" /> + <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: 0; + left: 0; + right: 0; + bottom: 0; + border: solid 15px transparent; + padding: 15px; + background-color: yellow; + background-clip: padding-box; + } + </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 id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-background-clip.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip.html new file mode 100644 index 0000000000..97beda239b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-clip.html @@ -0,0 +1,25 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-width"> + <link rel="match" href="reference/css3-background-clip-ref.html"/> + <style type="text/css"> + div{ + width:300px; + height:300px; + padding:50px; + border:10px dashed #000000; + background-color:yellow; + background-clip:content-box; + } + </style> +</head> +<body> + <p>The test passes if the background is pruned to content box.</p> + <div>Inner area!</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-border-box.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-border-box.html new file mode 100644 index 0000000000..0451cd1135 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-border-box.html @@ -0,0 +1,28 @@ +<!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-8-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" /> + <link rel="match" href="reference/css3-background-origin-border-box-ref.html" /> + <style type="text/css"> + div { + width: 100px; + height: 100px; + border: 12px dashed black; + padding: 20px; + background-image: url('support/green-60-60.png'); + background-repeat: no-repeat; + background-origin: border-box; + } + </style> + </head> + <body> + <p> + The test passes if some part of the green square is covered by the dashed border. + </p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-content-box.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-content-box.html new file mode 100644 index 0000000000..7ea2b4b1bc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-content-box.html @@ -0,0 +1,28 @@ +<!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-08-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" /> + <link rel="match" href="reference/css3-background-origin-content-box-ref.html" /> + <style type="text/css"> + div { + width: 100px; + height: 100px; + border: 12px dashed black; + padding: 20px; + background-image: url('support/green-60-60.png'); + background-repeat: no-repeat; + background-origin: content-box; + } + </style> + </head> + <body> + <p> + The test passes if there are some paddings between the green square and the dashed border. + </p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-padding-box.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-padding-box.html new file mode 100644 index 0000000000..c1dc3f0788 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-origin-padding-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background origin 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-08-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" /> + <link rel="match" href="reference/css3-background-origin-padding-box-ref.html" /> + <style type="text/css"> + div { + width: 100px; + height: 100px; + border: 12px dashed black; + padding: 20px; + background-image: url('support/green-60-60.png'); + background-repeat: no-repeat; + background-origin: padding-box; + } + </style> + </head> + <body> + <p> + The test passes if the green square is just close to the dashed border. + </p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-background-size-001.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-size-001.html new file mode 100644 index 0000000000..6da2c9d326 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-size-001.html @@ -0,0 +1,33 @@ +<!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-08-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="match" href="reference/css3-background-size-001-ref.html" /> + <style type="text/css"> + div { + width: 150px; + height: 150px; + background-image: url(support/green-150-150.png); + background-repeat: no-repeat; + } + #div1 { + background-size: 30%; + } + #div2 { + background-size: 60%; + } + </style> + </head> + <body> + <p> + The test passes if the following three green squares have different size. + </p> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-background-size-contain.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-size-contain.html new file mode 100644 index 0000000000..1c65a30a74 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-size-contain.html @@ -0,0 +1,26 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="match" href="reference/css3-background-size-contain-ref.html"> + <style> + div { + width: 200px; + height: 250px; + border: 5px dashed black; + overflow: hidden; + background-image: url(support/60x60-green.png); + background-size: contain; + background-repeat: no-repeat; + } + </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></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-background-size.html b/testing/web-platform/tests/css/css-backgrounds/css3-background-size.html new file mode 100644 index 0000000000..79d6c5417f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-background-size.html @@ -0,0 +1,24 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-width"> + <link rel="match" href="reference/css3-background-size-ref.html"/> + <style type="text/css"> + div{ + width:60px; + height:60px; + background:url(support/60x60-green.png); + background-size:50%; + background-repeat: no-repeat; + } + </style> +</head> +<body> + <p>The test passes if the green box is resized to 50%.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-border-image-repeat-repeat.html b/testing/web-platform/tests/css/css-backgrounds/css3-border-image-repeat-repeat.html new file mode 100644 index 0000000000..b6db467a66 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-border-image-repeat-repeat.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + <title>CSS Border Test: border image repeat property with value repeat</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-08-26 --> + <!-- + corrected and improved to be more precise, rigorous and much more challenging + by Gérard Talbot 2020-08-24 + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="reference/css3-border-image-repeat-repeat-ref.html"> + <meta name="fuzzy" content="maxDifference=0-58;totalPixels=0-412"> + <style> + div { + border: red solid 18px; + border-image-repeat: repeat; + border-image-slice: 27; + border-image-source: url("support/blue-and-red-diamonds-81x81.png"); + height: 108px; /* 6 times 18 == 108 */ + width: 144px; /* 8 times 18 == 144 */ + } + </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. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-border-image-repeat-stretch.html b/testing/web-platform/tests/css/css-backgrounds/css3-border-image-repeat-stretch.html new file mode 100644 index 0000000000..c83cf38372 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-border-image-repeat-stretch.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + <title>CSS Border Test: border image repeat property with value stretch</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-08-26 --> + <!-- + corrected and improved to be more precise + by Gérard Talbot 2020-05-27 + --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat"> + <link rel="match" href="reference/css3-border-image-repeat-stretch-ref.html"> + <style> + div { + border: red solid 27px; + border-image-repeat: stretch; + border-image-source: url("support/blue-and-red-diamonds-81x81.png"); + border-image-slice: 27; + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if a blue diamond is stretched between red diamonds. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-border-image-source.html b/testing/web-platform/tests/css/css-backgrounds/css3-border-image-source.html new file mode 100644 index 0000000000..e53ec1fbb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-border-image-source.html @@ -0,0 +1,26 @@ +<!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-08-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-source" /> + <link rel="match" href="reference/css3-border-image-source-ref.html" /> + <style type="text/css"> + div { + background-color: yellow; + width: 100px; + height: 100px; + border: solid 60px red; + border-image-source: url(support/green-60-60.png); + } + </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></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/css3-box-shadow.html b/testing/web-platform/tests/css/css-backgrounds/css3-box-shadow.html new file mode 100644 index 0000000000..c6e746c1de --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/css3-box-shadow.html @@ -0,0 +1,23 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-width"> + <link rel="match" href="reference/css3-box-shadow-ref.html"/> + <style type="text/css"> + div{ + width:300px; + height:100px; + background-color:#ff9900; + box-shadow:10px 10px black; + } + </style> +</head> +<body> + <p>The test passes if there is a black shadow behind the orange box.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/currentcolor-border-repaint-parent.html b/testing/web-platform/tests/css/css-backgrounds/currentcolor-border-repaint-parent.html new file mode 100644 index 0000000000..c84d26c434 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/currentcolor-border-repaint-parent.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>currentColor used in border repaints properly when parent color changes</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #container { + color: red; + } + + #container.green { + color: green; + } + + #target { + border: 50px solid currentColor; + width: 0; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="container"> + <div id="target"></div> +</div> + +<script> + addEventListener("load", () => { + requestAnimationFrame(() => { + container.classList.add("green"); + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/document-canvas-remove-body-ref.html b/testing/web-platform/tests/css/css-backgrounds/document-canvas-remove-body-ref.html new file mode 100644 index 0000000000..8612aaafa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/document-canvas-remove-body-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<!-- intentionally empty --> diff --git a/testing/web-platform/tests/css/css-backgrounds/document-canvas-remove-body.html b/testing/web-platform/tests/css/css-backgrounds/document-canvas-remove-body.html new file mode 100644 index 0000000000..35b0383cea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/document-canvas-remove-body.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#body-background"> +<link rel="match" href="document-canvas-remove-body-ref.html"> +<body style="background: red"></body> +<script> +waitForAtLeastOneFrame().then(() => { + document.body.remove(); + takeScreenshot(); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/fieldset-inset-shadow-ref.html b/testing/web-platform/tests/css/css-backgrounds/fieldset-inset-shadow-ref.html new file mode 100644 index 0000000000..6b4b9e5755 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/fieldset-inset-shadow-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + div { + width: 100px; + height: 100px; + box-sizing: border-box; + box-shadow: 0 0 0 10px inset black; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/fieldset-inset-shadow.html b/testing/web-platform/tests/css/css-backgrounds/fieldset-inset-shadow.html new file mode 100644 index 0000000000..cb13cd805d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/fieldset-inset-shadow.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>inset box shadow works on fieldset</title> +<link rel=help href="https://drafts.csswg.org/css-backgrounds/#box-shadow"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1750276"> +<link rel=author title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel=author title="Mozilla" href="https://mozilla.org"> +<link rel=match href="fieldset-inset-shadow-ref.html"> +<style> + fieldset { + width: 100px; + height: 100px; + border: none; + margin: 0; + box-sizing: border-box; + box-shadow: 0 0 0 10px inset black; + } +</style> +<fieldset></fieldset> diff --git a/testing/web-platform/tests/css/css-backgrounds/first-letter-space-not-selected.html b/testing/web-platform/tests/css/css-backgrounds/first-letter-space-not-selected.html new file mode 100644 index 0000000000..842832c01b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/first-letter-space-not-selected.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: ::first-letter - spaces should not be selected</title> + <link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"> + <link rel="match" href="reference/first-letter-space-not-selected-ref.html"> + <meta name="assert" content="::first-letter should not include initial spaces. Test non-breaking space, em space, en space, and thin space, both alone and preceeding a real letter."> + <style type="text/css"> + .test::first-letter { + background: red; + font-size: 3em; + } + </style> +</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/gradient-wrong-interpolation-crash.html b/testing/web-platform/tests/css/css-backgrounds/gradient-wrong-interpolation-crash.html new file mode 100644 index 0000000000..5aefb64297 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/gradient-wrong-interpolation-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel=help href="https://buzil.la/1772555"> +<style> + * { + background: center / cover border-box, currentcolor right 55882ch center / cover content-box radial-gradient(58ch 94% ellipse at left 28Q top 34%, hsl(60 71% 7% / 0.3204252445367216) -1610731402em, -31pt, hsla(2.9234077762890767rad, 58%, 56%, 0%) 26%) local repeat-x; + } +</style> diff --git a/testing/web-platform/tests/css/css-backgrounds/hidpi/simple-bg-color-ref.html b/testing/web-platform/tests/css/css-backgrounds/hidpi/simple-bg-color-ref.html new file mode 100644 index 0000000000..1030d005d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/hidpi/simple-bg-color-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<body> + <canvas id="canvas" width="400" height="800" style="image-rendering: crisp-edges"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + canvas.style.width = (canvas.width / 2) + 'px'; + canvas.style.height = (canvas.height / 2) + 'px'; + var ctx = canvas.getContext('2d'); + ctx.scale(2, 2); + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 100, 150); + ctx.fillStyle = 'red'; + ctx.fillRect(0, 150, 200, 250); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/hidpi/simple-bg-color.html b/testing/web-platform/tests/css/css-backgrounds/hidpi/simple-bg-color.html new file mode 100644 index 0000000000..07bea44d21 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/hidpi/simple-bg-color.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<link rel="match" href="simple-bg-color-ref.html"> +<style> +.box1 { + width: 100px; + height: 150px; + background-color: green; +} +.box2 { + width: 200px; + height: 250px; + background-color: red; +} +</style> +<body> + <div class='box1'></div> + <div class='box2'></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/inheritance.sub.html b/testing/web-platform/tests/css/css-backgrounds/inheritance.sub.html new file mode 100644 index 0000000000..01bb842299 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/inheritance.sub.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Backgrounds and Borders properties</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#property-index"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="reference"></div> +<!-- container and target are used by the functions in inheritance-testcommon.js --> +<div id="container"> + <div id="target"></div> +</div> +<style> + #reference { + column-rule-style: dotted; /* Avoid column-rule-width computed style 0px */ + column-rule-width: medium; + } + #container { + border-style: solid; /* Avoid border-*-width computed style 0px */ + } + #target { + border-style: solid; /* Avoid border-*-width computed style 0px */ + } +</style> +<script> +const transparentColor = 'rgba(0, 0, 0, 0)'; // https://www.w3.org/TR/css-color-3/#transparent +const mediumWidth = getComputedStyle(document.getElementById('reference')).columnRuleWidth; // e.g. 3px +const currentColor = 'rgb(2, 3, 4)'; +container.style.color = currentColor; + + +// assert_not_inherited accepts: property name, expected initial value, another value the property supports. +assert_not_inherited('background-attachment', 'scroll', 'fixed'); +assert_not_inherited('background-clip', 'border-box', 'padding-box'); +assert_not_inherited('background-color', transparentColor, 'rgb(42, 53, 64)'); +assert_not_inherited('background-image', 'none', 'url("https://{{host}}/")'); +assert_not_inherited('background-origin', 'padding-box', 'content-box'); +assert_not_inherited('background-position', '0% 0%', '10px 20px'); +assert_not_inherited('background-position-x', '0%', '10px'); +assert_not_inherited('background-position-y', '0%', '20px'); +assert_not_inherited('background-repeat', 'repeat', 'space round'); +assert_not_inherited('background-size', 'auto', 'contain'); + +assert_not_inherited('border-bottom-color', currentColor, 'rgb(42, 53, 64)'); +assert_not_inherited('border-bottom-left-radius', '0px', '5px 7%'); +assert_not_inherited('border-bottom-right-radius', '0px', '5px 7%'); +assert_not_inherited('border-bottom-style', 'none', 'dashed'); +assert_not_inherited('border-bottom-width', mediumWidth, '10px'); + +assert_not_inherited('border-image-outset', '0', '1px 2px 3px 4px'); +assert_not_inherited('border-image-repeat', 'stretch', 'repeat round'); +assert_not_inherited('border-image-slice', '100%', '1% 2% 3% 4% fill'); +assert_not_inherited('border-image-source', 'none', 'url("https://{{host}}/")'); +assert_not_inherited('border-image-width', '1', '1px 2px 3px 4px'); + +assert_not_inherited('border-left-color', currentColor, 'rgb(42, 53, 64)'); +assert_not_inherited('border-left-style', 'none', 'dashed'); +assert_not_inherited('border-left-width', mediumWidth, '10px'); + +assert_not_inherited('border-right-color', currentColor, 'rgb(42, 53, 64)'); +assert_not_inherited('border-right-style', 'none', 'dashed'); +assert_not_inherited('border-right-width', mediumWidth, '10px'); + +assert_not_inherited('border-top-color', currentColor, 'rgb(42, 53, 64)'); +assert_not_inherited('border-top-left-radius', '0px', '5px 7%'); +assert_not_inherited('border-top-right-radius', '0px', '5px 7%'); +assert_not_inherited('border-top-style', 'none', 'dashed'); +assert_not_inherited('border-top-width', mediumWidth, '10px'); + +assert_not_inherited('box-shadow', 'none', 'rgb(42, 53, 64) 1px 2px 3px 4px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/inline-background-rtl-001.html b/testing/web-platform/tests/css/css-backgrounds/inline-background-rtl-001.html new file mode 100644 index 0000000000..a7149e2f3c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/inline-background-rtl-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Backgrounds Test: background to inline boxes in RTL</title> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-color"> +<link rel="help" href="https://crbug.com/1123375"> +<link rel="match" href="reference/inline-background-rtl-001-ref.html"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +.s { background-color: white; } +.atomic { display: inline-block; } +</style> +<body> +<div dir="rtl"> +<span> +<span class="s">Hello<br>World<br></span> +<span class="atomic"></span> +</span> +</div> + +<div dir="rtl"> +<span dir="ltr"> +<span class="s">Hello<br>World<br></span> +<span class="atomic"></span> +</span> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/inner-border-non-renderable-ref.html b/testing/web-platform/tests/css/css-backgrounds/inner-border-non-renderable-ref.html new file mode 100644 index 0000000000..b88cf1547a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/inner-border-non-renderable-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>Testing that child-background doesn't bleed through its parent border for a inner-border-radius that is larger than the content rect</title> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> + <link rel="assert" content="Testing that child-background doesn't bleed through its parent border for a inner-border-radius that is larger than the content rect"> + <style> + body { + font-size: 24px; + color: black; + margin: 8px; + } + </style> +</head> +<body> + <div> Test passes if no blue square is shown:</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/inner-border-non-renderable.html b/testing/web-platform/tests/css/css-backgrounds/inner-border-non-renderable.html new file mode 100644 index 0000000000..7c3cff7988 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/inner-border-non-renderable.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>Testing that child-background doesn't bleed through its parent border for a inner-border-radius that is larger than the content rect</title> + <link rel="match" href="inner-border-non-renderable-ref.html"> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> + <link rel="assert" content="Testing that child-background doesn't bleed through its parent border for a inner-border-radius that is larger than the content rect"> + <style> + body { + font-size: 24px; + color: black; + margin: 8px; + } + .clipping { + width: 300px; + height: 200px; + overflow: hidden; + border: 30px solid green; + border-top-color: gold; + border-top-right-radius: 150px 267px; + background-color: blue; + } + .composited { + width: 100%; + height: 100%; + background-color: blue; + } + .clip-test { + clip-path: inset(60px 10px 190px 320px); + } + </style> +</head> +<body> + <div> Test passes if no blue square is shown:</div> + <div class="clipping clip-test"> + <div class="composited"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-scroll-ref.html b/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-scroll-ref.html new file mode 100644 index 0000000000..55be941bfc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-scroll-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +#target { + width: 220px; + height: 120px; + overflow: scroll; +} +#inner { + padding: 10px; + box-shadow: 10px 10px green inset; + height: 120px; +} +</style> +<div id="target"> + <div id="inner"> + Passes if green inset shadow is visible. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-scroll.html b/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-scroll.html new file mode 100644 index 0000000000..7eca4ea544 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-scroll.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> +<link rel="match" href="inset-box-shadow-scroll-ref.html"/> +<style> +#target { + width: 200px; + height: 100px; + overflow: scroll; + background-color: white; + box-shadow: 10px 10px green inset; + padding: 10px; +} +#inner { + height: 120px; +} +</style> +<div id="target"> + <div id="inner"> + Passes if green inset shadow is visible. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-stacking-context-scroll.html b/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-stacking-context-scroll.html new file mode 100644 index 0000000000..edd79b88be --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/inset-box-shadow-stacking-context-scroll.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> +<link rel="match" href="inset-box-shadow-scroll-ref.html"/> +<style> +#target { + position: absolute; + z-index: 1; + width: 200px; + height: 100px; + overflow: scroll; + background-color: white; + box-shadow: 10px 10px green inset; + padding: 10px; +} +#inner { + height: 120px; +} +</style> +<div id="target"> + <div id="inner"> + Passes if green inset shadow is visible. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/justfortest.html b/testing/web-platform/tests/css/css-backgrounds/justfortest.html new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/justfortest.html diff --git a/testing/web-platform/tests/css/css-backgrounds/linear-gradient-calc-crash.html b/testing/web-platform/tests/css/css-backgrounds/linear-gradient-calc-crash.html new file mode 100644 index 0000000000..5ae6104a79 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/linear-gradient-calc-crash.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>CSS Backgrounds and Borders Test: Chrome linear-gradient crash test with large percentage calc()</title> +<link rel="help" href="https://crbug.com/1174046"> +<div style="background-image: linear-gradient(to left, black, red calc(1e39% + 0px), green);">Should not crash</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/linear-gradient-currentcolor-first-line-ref.html b/testing/web-platform/tests/css/css-backgrounds/linear-gradient-currentcolor-first-line-ref.html new file mode 100644 index 0000000000..a83685f3fe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/linear-gradient-currentcolor-first-line-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>CSS Test Reference</title> +<p>You should see no red below.</p> +<span style="color:green;background:green">Green</span> diff --git a/testing/web-platform/tests/css/css-backgrounds/linear-gradient-currentcolor-first-line.html b/testing/web-platform/tests/css/css-backgrounds/linear-gradient-currentcolor-first-line.html new file mode 100644 index 0000000000..7c8f8a8fda --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/linear-gradient-currentcolor-first-line.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>CSS Backgrounds and Borders Test: linear-gradient() with currentcolor on ::first-line</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#first-line-background"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-inheritance"> +<link rel="match" href="linear-gradient-currentcolor-first-line-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-265"> +<style> + div { color: red; } + div::first-line { color: green; } + span { background-image: linear-gradient(currentcolor, currentcolor); } +</style> +<p>You should see no red below.</p> +<div><span>Green</span></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/local-attachment-content-box-scroll-ref.html b/testing/web-platform/tests/css/css-backgrounds/local-attachment-content-box-scroll-ref.html new file mode 100644 index 0000000000..a6fd494660 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/local-attachment-content-box-scroll-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<style> +.container { + width: 100px; + height: 100px; + box-sizing: border-box; + overflow: hidden; + border: 1px solid black; + display: block; +} +.content { + width: 100%; + height: 100%; + background: blue; +} +</style> +<div class="container"> + <div class="content"></div> +</div> +<div class="container" style="padding-top: 20px; padding-left: 20px"> + <div class="content"></div> +</div> +<div class="container" style="padding-right: 20px; padding-bottom: 20px"> + <div class="content"></div> +</div> +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/local-attachment-content-box-scroll.html b/testing/web-platform/tests/css/css-backgrounds/local-attachment-content-box-scroll.html new file mode 100644 index 0000000000..7644c15886 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/local-attachment-content-box-scroll.html @@ -0,0 +1,54 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Backgrounds: local attachment content-box background scroll with padding</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-clip"> +<link rel="match" href="local-attachment-content-box-scroll-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> +.container { + width: 100px; + height: 100px; + box-sizing: border-box; + overflow: hidden; + border: 1px solid black; + padding: 20px; + background-color: blue; + background-attachment: local; + background-clip: content-box; + display: none; +} +.content { + width: 400px; + height: 400px; +} +</style> +<div id="container1" class="container"> + <div class="content"></div> +</div> +<div id="container2" class="container"> + <div class="content"></div> +</div> +<div id="container3" class="container"> + <div class="content"></div> +</div> +<div id="container4" class="container"> + <div class="content"></div> +</div> +<script> +container1.style.display = 'block'; +container2.style.display = 'block'; +container2.scrollTo(40, 40); +container3.style.display = 'block'; +container3.scrollTo(260, 260); +container4.style.display = 'block'; +container4.scrollTo(400, 400); +waitForAtLeastOneFrame().then(() => { + container1.scrollTo(40, 40); + container2.scrollTo(0, 0); + container3.scrollTo(400, 400); + container4.scrollTo(260, 260); + takeScreenshot(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/none-as-image-layer.htm b/testing/web-platform/tests/css/css-backgrounds/none-as-image-layer.htm new file mode 100644 index 0000000000..5814e070b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/none-as-image-layer.htm @@ -0,0 +1,39 @@ +<!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 Test: None counts as an image layer</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image" /> + <meta name="assert" content="'Background-image: none' counts as an image layer but draws nothing." /> + <style type="text/css"> + div + { + margin: 10px; + width: 250px; + height: 250px; + border: thick solid black; + } + #test + { + background-image: url("support/blue_color.png"), none, url("support/green_color.png"); + background-repeat: no-repeat, repeat, no-repeat; + background-position: 30px 30px, 60px 60px, 90px 90px; + } + #reference + { + background-image: url("support/blue_color.png"), url("support/green_color.png"); + background-repeat: no-repeat, no-repeat; + background-position: 30px 30px, 90px 90px; + } + </style> + </head> + <body> + <p>Test passes if there is green on the page and contents of the black boxes look exactly the same.</p> + <table> + <tr> + <td><div id="test"></div></td> + <td><div id="reference"></div></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/order-of-images.htm b/testing/web-platform/tests/css/css-backgrounds/order-of-images.htm new file mode 100644 index 0000000000..9f165fb9b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/order-of-images.htm @@ -0,0 +1,24 @@ +<!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 Backgrounds Test: Order of multiple overlapping background images</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image" /> + <link rel="match" href="reference/order-of-images-ref.html" /> + <meta name="assert" content="Background images are listed in order, with the first image being rendered on top of all the other images, and so on." /> + <style type="text/css"> + div + { + width: 250px; + height: 250px; + background-image: url("support/blue_color.png"), url("support/orange_color.png"), url("support/black_color.png"); + background-repeat: no-repeat; + background-position: 30px 30px, 60px 60px, 90px 90px; + } + </style> + </head> + <body> + <p>Test passes if a blue box overlaps an orange box, which overlaps a black box.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-computed.html new file mode 100644 index 0000000000..702d5fc8ac --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundAttachment</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-attachment"> +<meta name="assert" content="background-attachment computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-attachment", "fixed"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-attachment", "scroll, fixed, local", "scroll"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-invalid.html new file mode 100644 index 0000000000..30757f3a4d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-attachment with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-attachment"> +<meta name="assert" content="background-attachment supports only the grammar '<attachment>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-attachment", "auto"); +test_invalid_value("background-attachment", "local, none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-valid.html new file mode 100644 index 0000000000..14d72c606b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-attachment with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-attachment"> +<meta name="assert" content="background-attachment supports the full grammar '<attachment>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-attachment", "fixed"); +test_valid_value("background-attachment", "scroll, fixed, local, fixed, scroll"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-computed.html new file mode 100644 index 0000000000..91ca19f5b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundClip</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip"> +<meta name="assert" content="background-clip computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-clip", "border-box"); +test_computed_value("background-clip", "padding-box"); +test_computed_value("background-clip", "content-box"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-clip", "border-box, padding-box, content-box", "border-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-invalid.html new file mode 100644 index 0000000000..96831e06fc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-clip with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip"> +<meta name="assert" content="background-clip supports only the grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-clip", "fill-box"); +test_invalid_value("background-clip", "margin-box"); +test_invalid_value("background-clip", "stroke-box"); +test_invalid_value("background-clip", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-valid.html new file mode 100644 index 0000000000..e262a788bd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-clip with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip"> +<meta name="assert" content="background-clip supports the full grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-clip", "border-box"); +test_valid_value("background-clip", "padding-box"); +test_valid_value("background-clip", "content-box"); + +test_valid_value("background-clip", "border-box, padding-box, content-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-computed.html new file mode 100644 index 0000000000..561463803b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundColor</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-color"> +<meta name="assert" content="background-color computed value is a computed color."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: lime; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-color", "currentcolor", "rgb(0, 255, 0)"); + +test_computed_value("background-color", "red", "rgb(255, 0, 0)"); +test_computed_value("background-color", "#00FF00", "rgb(0, 255, 0)"); +test_computed_value("background-color", "rgb(0, 0, 255)"); +test_computed_value("background-color", "rgb(100%, 100%, 0%)", "rgb(255, 255, 0)"); +test_computed_value("background-color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)"); +test_computed_value("background-color", "transparent", "rgba(0, 0, 0, 0)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-invalid.html new file mode 100644 index 0000000000..bf315fdb4e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-color with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-color"> +<meta name="assert" content="background-color supports only the grammar '<color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-color", "none"); +test_invalid_value("background-color", "black white"); +test_invalid_value("background-color", "black, white"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-valid.html new file mode 100644 index 0000000000..3859b932c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-color"> +<meta name="assert" content="background-color supports the full grammar '<color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-color", "currentcolor", "currentcolor"); +test_valid_value("background-color", "currentColor", "currentcolor"); + +test_valid_value("background-color", "red"); +test_valid_value("background-color", "#00FF00", "rgb(0, 255, 0)"); +test_valid_value("background-color", "rgb(0, 0, 255)"); +test_valid_value("background-color", "rgb(100%, 100%, 0%)", "rgb(255, 255, 0)"); +test_valid_value("background-color", "hsl(120, 100%, 50%)", ["rgb(0, 255, 0)", "hsl(120, 100%, 50%)"]); // Edge serializes as hsl +test_valid_value("background-color", "teal"); + +test_valid_value("background-color", "transparent"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-computed.html new file mode 100644 index 0000000000..8a07df4903 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-computed.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().background with multiple layers</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="The number of layers is determined by the number of comma-separated values in the background-image property. ."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + background-image: none, none, none; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-attachment", "local", "local, local, local"); +test_computed_value("background-attachment", "scroll, fixed", "scroll, fixed, scroll"); +test_computed_value("background-attachment", "local, fixed, scroll"); +test_computed_value("background-attachment", "local, fixed, scroll, fixed", "local, fixed, scroll"); + +test_computed_value("background-clip", "border-box", "border-box, border-box, border-box"); +test_computed_value("background-clip", "content-box, border-box", "content-box, border-box, content-box"); +test_computed_value("background-clip", "border-box, padding-box, content-box"); +test_computed_value("background-clip", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box"); + +// background-color always computes as a single color. +test_computed_value("background-color", "rgb(255, 0, 0)"); + +test_computed_value("background-origin", "border-box", "border-box, border-box, border-box"); +test_computed_value("background-origin", "content-box, border-box", "content-box, border-box, content-box"); +test_computed_value("background-origin", "border-box, padding-box, content-box"); +test_computed_value("background-origin", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box"); + +test_computed_value("background-position", "50% 6px", "50% 6px, 50% 6px, 50% 6px"); +test_computed_value("background-position", "12px 13px, 50% 6px", "12px 13px, 50% 6px, 12px 13px"); +test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px"); +test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px, -7px 8px", "12px 13px, 50% 6px, 30px -10px"); + +test_computed_value("background-position-x", "0.5em", "20px, 20px, 20px"); +test_computed_value("background-position-x", "-20%, 10px", "-20%, 10px, -20%"); + +test_computed_value("background-position-x", "center, left, right", "50%, 0%, 100%"); +test_computed_value("background-position-x", "calc(10px - 0.5em), -20%, right, 15%", "-10px, -20%, 100%"); + +test_computed_value("background-position-y", "0.5em", "20px, 20px, 20px"); +test_computed_value("background-position-y", "-20%, 10px", "-20%, 10px, -20%"); +test_computed_value("background-position-y", "center, top, bottom", "50%, 0%, 100%"); +test_computed_value("background-position-y", "calc(10px - 0.5em), -20%, bottom, 15%", "-10px, -20%, 100%"); + +test_computed_value("background-repeat", "round", "round, round, round"); +test_computed_value("background-repeat", "repeat-x, repeat", "repeat-x, repeat, repeat-x"); +test_computed_value("background-repeat", "repeat space, round no-repeat, repeat-x"); +test_computed_value("background-repeat", "repeat-y, round no-repeat, repeat-x, repeat", "repeat-y, round no-repeat, repeat-x"); + +test_computed_value("background-size", "contain", "contain, contain, contain"); +test_computed_value("background-size", "auto 1px, 2% 3%", "auto 1px, 2% 3%, auto 1px"); +test_computed_value("background-size", "auto 1px, 2% 3%, contain"); +test_computed_value("background-size", "auto 1px, 2% 3%, contain, 7px 8px", "auto 1px, 2% 3%, contain"); + +// Open issue: Define serialization for background shorthand +// https://github.com/w3c/csswg-drafts/issues/418 +// test_computed_value("background", "rgb(1, 2, 3) none 4px 5px / 6px 7px repeat space scroll border-box padding-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html new file mode 100644 index 0000000000..cf3c065d49 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundImage</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image"> +<meta name="assert" content="background-image computed value is as specified."> +<meta name="assert" content="Colors and lengths are computed, with radii clamped."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<!-- target is used by test_computed_value --> +<div id="target"></div> +<script> +test_computed_value("background-image", "none"); + +test_computed_value("background-image", 'url("http://{{host}}/")'); +test_computed_value("background-image", 'none, url("http://{{host}}/")'); + +test_computed_value('background-image', 'linear-gradient(to left bottom, red, blue)', 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255))'); + +test_computed_value('background-image', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(at center, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(at 50%, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-side, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-side at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner at center, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner at 50%, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner at 10px 10px, red, blue)', 'radial-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); + +test_computed_value('background-image', 'radial-gradient(10px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(circle calc(-0.5em + 10px) at calc(-1em + 10px) calc(-2em + 10px), red, blue)', 'radial-gradient(0px at -30px -70px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(ellipse calc(-0.5em + 10px) calc(0.5em + 10px) at 20px 30px, red, blue)', 'radial-gradient(0px 30px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(ellipse calc(0.5em + 10px) calc(-0.5em + 10px) at 20px 30px, red, blue)', 'radial-gradient(30px 0px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))'); + +test_computed_value('background-image', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(at center, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(at 50%, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg at center, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg at 50%, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg at 10px 10px, red, blue)', 'conic-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg at center, red, blue)', 'conic-gradient(from 45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg at 50%, red, blue)', 'conic-gradient(from 45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg at 10px 10px, red, blue)', 'conic-gradient(from 45deg at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg at center, red, blue)', 'conic-gradient(from -45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg at 50%, red, blue)', 'conic-gradient(from -45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg at 10px 10px, red, blue)', 'conic-gradient(from -45deg at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-invalid.html new file mode 100644 index 0000000000..8a48d5efe8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-invalid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-image with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image"> +<link rel="help" href="https://drafts.csswg.org/css-images/#radial-gradients"> +<meta name="assert" content="background-image supports only the grammar '<bg-image>#'."> +<meta name="assert" content="Negative radial-gradient radii are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-image", "none, auto"); + +// Negative radii are invalid. +test_invalid_value("background-image", "radial-gradient(circle -10px at center, red, blue)"); +test_invalid_value("background-image", "repeating-radial-gradient(-10px at center, red, blue)"); +test_invalid_value("background-image", "radial-gradient(ellipse -20px 30px at center, red, blue)"); +test_invalid_value("background-image", "repeating-radial-gradient(-20% 30% at center, red, blue)"); +test_invalid_value("background-image", "radial-gradient(20px -30px at center, red, blue)"); +test_invalid_value("background-image", "repeating-radial-gradient(20px -30px ellipse at center, red, blue)"); + +test_invalid_value("background-image", "cross-fade(auto blue, 50% red)"); +test_invalid_value("background-image", "cross-fade(1px red, green)"); +test_invalid_value("background-image", "cross-fade(calc(1% + 1px) red, green)"); +test_invalid_value("background-image", "cross-fade(-1% red, green)"); +test_invalid_value("background-image", "cross-fade(101% red, green)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html new file mode 100644 index 0000000000..da08a63885 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-image with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image"> +<meta name="assert" content="background-image supports the full grammar '<bg-image>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-image", "none"); + +// Safari removes quotes. +test_valid_value("background-image", 'url("http://www.example.com/")', ['url("http://www.example.com/")', 'url(http://www.example.com/)']); +test_valid_value("background-image", 'none, url("http://www.example.com/")', ['none, url("http://www.example.com/")', 'none, url(http://www.example.com/)']); + +test_valid_value( + "background-image", + "cross-fade(50% url(http://www.example.com), 50% url(http://www.example.com))", [ + "cross-fade(50% url(http://www.example.com), 50% url(http://www.example.com))", + 'cross-fade(50% url("http://www.example.com"), 50% url("http://www.example.com"))' + ]); +test_valid_value( + "background-image", + "cross-fade(33% red, 33% white, blue)"); +test_valid_value( + "background-image", + "cross-fade(blue, linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(0, 212, 255) 100%))"); +test_valid_value("background-image", "cross-fade( 1% red, green)", "cross-fade(1% red, green)"); +test_valid_value("background-image", "cross-fade(1% red , green)", "cross-fade(1% red, green)"); +test_valid_value("background-image", "cross-fade(1% red, green )", "cross-fade(1% red, green)"); +test_valid_value("background-image", "cross-fade(1% red, cross-fade(2% red, green))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-invalid.html new file mode 100644 index 0000000000..76ff18f35d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="background supports only the grammar '<bg-layer># , <final-bg-layer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <bg-layer> does not allow a <color>. +test_invalid_value("background", "red, green"); + +// A `/ <bg-size>` is only allowed directly after a <bg-position>. +test_invalid_value("background", "black 0 url(https://example.invalid/) / cover"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-computed.html new file mode 100644 index 0000000000..41887f852d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundOrigin</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-origin"> +<meta name="assert" content="background-origin computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-origin", "border-box"); +test_computed_value("background-origin", "padding-box"); +test_computed_value("background-origin", "content-box"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-origin", "border-box, padding-box, content-box", "border-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-invalid.html new file mode 100644 index 0000000000..5da00dabe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-origin with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-origin"> +<meta name="assert" content="background-origin supports only the grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-origin", "fill-box"); +test_invalid_value("background-origin", "margin-box"); +test_invalid_value("background-origin", "stroke-box"); +test_invalid_value("background-origin", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-valid.html new file mode 100644 index 0000000000..7e3b0fffca --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-origin with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-origin"> +<meta name="assert" content="background-origin supports the full grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-origin", "border-box"); +test_valid_value("background-origin", "padding-box"); +test_valid_value("background-origin", "content-box"); + +test_valid_value("background-origin", "border-box, padding-box, content-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-computed.html new file mode 100644 index 0000000000..2a3f6fae1e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-computed.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundPosition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<meta name="assert" content="background-position computed value is a list, each item a pair of offsets (horizontal and vertical) from the top left origin each given as a computed <length-percentage> value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-position", "1px", "1px 50%"); +test_computed_value("background-position", "1px center", "1px 50%"); +test_computed_value("background-position", "-2% -3%"); +test_computed_value("background-position", "5% top", "5% 0%"); +test_computed_value("background-position", "center", "50% 50%"); +test_computed_value("background-position", "center center", "50% 50%"); +test_computed_value("background-position", "center 6px", "50% 6px"); +test_computed_value("background-position", "center left", "0% 50%"); +test_computed_value("background-position", "center right 7%", "93% 50%"); +test_computed_value("background-position", "center bottom", "50% 100%"); +test_computed_value("background-position", "center top 8px", "50% 8px"); +test_computed_value("background-position", "left", "0% 50%"); +test_computed_value("background-position", "right 9%", "100% 9%"); +test_computed_value("background-position", "left 10px center", "10px 50%"); +test_computed_value("background-position", "right 11% bottom", "89% 100%"); +test_computed_value("background-position", "left 12px top 13px", "12px 13px"); +test_computed_value("background-position", "right center", "100% 50%"); +test_computed_value("background-position", "left bottom", "0% 100%"); +test_computed_value("background-position", "right top 14%", "100% 14%"); +test_computed_value("background-position", "bottom", "50% 100%"); +test_computed_value("background-position", "top 15px center", "50% 15px"); +test_computed_value("background-position", "bottom 16% left", "0% 84%"); +test_computed_value("background-position", "top 17px right -18px", "calc(100% + 18px) 17px"); +test_computed_value("background-position", "bottom center", "50% 100%"); +test_computed_value("background-position", "top left", "0% 0%"); +test_computed_value("background-position", "bottom right 19%", "81% 100%"); +test_computed_value("background-position", "calc(10px + 0.5em) calc(10px - 0.5em)", "30px -10px"); +test_computed_value("background-position", "calc(10px - 0.5em) calc(10px + 0.5em)", "-10px 30px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px", "12px 13px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-invalid.html new file mode 100644 index 0000000000..966db4c31a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-invalid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-position with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<meta name="assert" content="background-position supports only the grammar '<bg-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-position", "left right"); +test_invalid_value("background-position", "top bottom"); +test_invalid_value("background-position", "1% center 2px"); +test_invalid_value("background-position", "right 7% 50%"); +test_invalid_value("background-position", "50% top 8px"); +test_invalid_value("background-position", "left 10px 50%"); +test_invalid_value("background-position", "right 11% 100%"); +test_invalid_value("background-position", "100% top 14%"); +test_invalid_value("background-position", "50% top 15px"); +test_invalid_value("background-position", "0% bottom 16%"); +test_invalid_value("background-position", "right 19% 100%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-valid.html new file mode 100644 index 0000000000..dac7b1012a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-valid.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-position with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<meta name="assert" content="background-position supports the full grammar '<bg-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-position", "1px", ["1px", "1px center"]); +test_valid_value("background-position", "1px center", ["1px", "1px center"]); +test_valid_value("background-position", "-2% -3%"); +test_valid_value("background-position", "5% top"); +test_valid_value("background-position", "center", ["center", "center center"]); +test_valid_value("background-position", "center center", ["center", "center center"]); +test_valid_value("background-position", "center 6px"); +test_valid_value("background-position", "center left", ["left center", "left"]); +test_valid_value("background-position", "center right 7%", "right 7% center"); +test_valid_value("background-position", "center bottom", ["center bottom", "bottom"]); +test_valid_value("background-position", "center top 8px", ["center top 8px", "center 8px"]); +test_valid_value("background-position", "left", ["left center", "left"]); +test_valid_value("background-position", "right 9%"); +test_valid_value("background-position", "left 10px center", ["left 10px center", "10px"]); +test_valid_value("background-position", "right 11% bottom", ["right 11% bottom", "right 11% bottom 0%"]); // "right 11% bottom 0%" in Edge +test_valid_value("background-position", "left 12px top 13px", ["left 12px top 13px", "12px 13px"]); +test_valid_value("background-position", "right center", ["right center", "right"]); +test_valid_value("background-position", "left bottom"); +test_valid_value("background-position", "right top 14%", ["right top 14%", "right 14%"]); +test_valid_value("background-position", "bottom", ["center bottom", "bottom"]); +test_valid_value("background-position", "top 15px center", ["center top 15px", "center 15px"]); +test_valid_value("background-position", "bottom 16% left", ["left bottom 16%", "left 0% bottom 16%"]); // "left 0% bottom 16%" in Edge +test_valid_value("background-position", "top 17px right 18px", "right 18px top 17px"); +test_valid_value("background-position", "bottom center", ["center bottom", "bottom"]); +test_valid_value("background-position", "top left", "left top"); +test_valid_value("background-position", "bottom right 19%", ["right 19% bottom", "right 19% bottom 0%"]); // "right 19% bottom 0%" in Edge +test_valid_value("background-position", "20% 0%"); +test_valid_value("background-position", "0% 0%"); +test_valid_value("background-position", "0%", ["0%", "0% center"]); +test_valid_value("background-position", "0% center", ["0%", "0% center"]); +test_valid_value("background-position", "center 0%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-computed.html new file mode 100644 index 0000000000..6cb7fb2c17 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-computed.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: getComputedStyle().backgroundPositionX</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-position-x", "center", "50%"); +test_computed_value("background-position-x", "left", "0%"); +test_computed_value("background-position-x", "right", "100%"); +test_computed_value("background-position-x", "x-start"); +test_computed_value("background-position-x", "x-end"); +test_computed_value("background-position-x", "-20%"); +test_computed_value("background-position-x", "10px"); +test_computed_value("background-position-x", "0.5em", "20px"); +test_computed_value("background-position-x", "calc(10px - 0.5em)", "-10px"); +test_computed_value("background-position-x", "left -20%", "-20%"); +test_computed_value("background-position-x", "right -10px", "calc(100% + 10px)"); +test_computed_value("background-position-x", "-20%, 10px", "-20%"); +test_computed_value("background-position-x", "center, left, right", "50%"); +test_computed_value("background-position-x", "0.5em, x-start, x-end", "20px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-position-x", "calc(10px - 0.5em), -20%, 10px", "-10px"); +test_computed_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "-10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-invalid.html new file mode 100644 index 0000000000..7cdfcf426c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"> +<meta name="assert" content="background-position-x supports only the grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-position-x", "top"); +test_invalid_value("background-position-x", "bottom"); +test_invalid_value("background-position-x", "y-start"); +test_invalid_value("background-position-x", "y-end"); +test_invalid_value("background-position-x", "center 10px"); +test_invalid_value("background-position-x", "20% left"); +test_invalid_value("background-position-x", "right left"); +test_invalid_value("background-position-x", "x-start center"); +test_invalid_value("background-position-x", "left, center right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-valid.html new file mode 100644 index 0000000000..ca9c229db4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-valid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"> +<meta name="assert" content="background-position-x supports the full grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-position-x", "center"); +test_valid_value("background-position-x", "left"); +test_valid_value("background-position-x", "right"); +test_valid_value("background-position-x", "x-start"); +test_valid_value("background-position-x", "x-end"); +test_valid_value("background-position-x", "-20%"); +test_valid_value("background-position-x", "10px"); +test_valid_value("background-position-x", "0.5em"); +test_valid_value("background-position-x", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("background-position-x", "left -20%"); +test_valid_value("background-position-x", "right 10px"); +test_valid_value("background-position-x", "-20%, 10px"); +test_valid_value("background-position-x", "center, left, right"); +test_valid_value("background-position-x", "0.5em, x-start, x-end"); +test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "calc(-0.5em + 10px), left -20%, right 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-computed.html new file mode 100644 index 0000000000..a2d60bfeb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-computed.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: getComputedStyle().backgroundPositionY</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-position-y", "center", "50%"); +test_computed_value("background-position-y", "top", "0%"); +test_computed_value("background-position-y", "bottom", "100%"); +test_computed_value("background-position-y", "y-start"); +test_computed_value("background-position-y", "y-end"); +test_computed_value("background-position-y", "-20%"); +test_computed_value("background-position-y", "10px"); +test_computed_value("background-position-y", "0.5em", "20px"); +test_computed_value("background-position-y", "calc(10px - 0.5em)", "-10px"); +test_computed_value("background-position-y", "top -20%", "-20%"); +test_computed_value("background-position-y", "bottom -10px", "calc(100% + 10px)"); +test_computed_value("background-position-y", "-20%, 10px", "-20%"); +test_computed_value("background-position-y", "center, top, bottom", "50%"); +test_computed_value("background-position-y", "0.5em, y-start, y-end", "20px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-position-y", "calc(10px - 0.5em), -20%, 10px", "-10px"); +test_computed_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "-10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-invalid.html new file mode 100644 index 0000000000..7885b142ee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"> +<meta name="assert" content="background-position-y supports only the grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-position-y", "left"); +test_invalid_value("background-position-y", "right"); +test_invalid_value("background-position-y", "x-start"); +test_invalid_value("background-position-y", "x-end"); +test_invalid_value("background-position-y", "center 10px"); +test_invalid_value("background-position-y", "20% top"); +test_invalid_value("background-position-y", "bottom top"); +test_invalid_value("background-position-y", "y-start center"); +test_invalid_value("background-position-y", "top, center bottom"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html new file mode 100644 index 0000000000..5a474a449d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"> +<meta name="assert" content="background-position-y supports the full grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-position-y", "center"); +test_valid_value("background-position-y", "top"); +test_valid_value("background-position-y", "bottom"); +test_valid_value("background-position-y", "y-start"); +test_valid_value("background-position-y", "y-end"); +test_valid_value("background-position-y", "-20%"); +test_valid_value("background-position-y", "10px"); +test_valid_value("background-position-y", "0.5em"); +test_valid_value("background-position-y", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("background-position-y", "top -20%"); +test_valid_value("background-position-y", "bottom 10px"); +test_valid_value("background-position-y", "-20%, 10px"); +test_valid_value("background-position-y", "center, top, bottom"); +test_valid_value("background-position-y", "0.5em, y-start, y-end"); +test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "calc(-0.5em + 10px), top -20%, bottom 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-computed.html new file mode 100644 index 0000000000..ad7bfa5a21 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundRepeat</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat"> +<meta name="assert" content="background-attachment repeat value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-repeat", "repeat-x"); +test_computed_value("background-repeat", "repeat-y"); +test_computed_value("background-repeat", "repeat"); +test_computed_value("background-repeat", "space"); +test_computed_value("background-repeat", "round"); +test_computed_value("background-repeat", "no-repeat"); + +test_computed_value("background-repeat", "repeat space"); +test_computed_value("background-repeat", "round no-repeat"); +test_computed_value("background-repeat", "repeat repeat", "repeat"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-repeat", "repeat-x, repeat-y, repeat", "repeat-x"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-invalid.html new file mode 100644 index 0000000000..abb153378f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-repeat with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat"> +<meta name="assert" content="background-repeat supports only the grammar '<repeat-style>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-repeat", "repeat repeat-x"); +test_invalid_value("background-repeat", "repeat-y round"); +test_invalid_value("background-repeat", "repeat space round"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-valid.html new file mode 100644 index 0000000000..2f72e03c73 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-repeat with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat"> +<meta name="assert" content="background-repeat supports the full grammar '<repeat-style>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-repeat", "repeat"); +test_valid_value("background-repeat", "repeat-x, repeat-y, repeat", "repeat-x, repeat-y, repeat"); +test_valid_value("background-repeat", "repeat space, round no-repeat, repeat-x"); +test_valid_value("background-repeat", "repeat repeat", ["repeat", "repeat repeat"]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-shorthand-serialization.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-shorthand-serialization.html new file mode 100644 index 0000000000..5212303784 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-shorthand-serialization.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Background Shorthand Serialization Test: background shorthand should only serialize non-initial values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="background shorthand should only serialize non-initial values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> + const element = document.createElement('div'); + + test((t) => { + element.style = 'background: yellow;'; + assert_equals(element.style.background , 'yellow'); + }, "single value"); + + test((t) => { + element.style = 'background: no-repeat url(/favicon.ico);'; + assert_equals(element.style.background , 'url("/favicon.ico") no-repeat'); + }, "multiple values"); + + test((t) => { + element.style = 'background: url(/favicon.ico) no-repeat, url(/favicon.ico) no-repeat;'; + assert_equals(element.style.background , 'url("/favicon.ico") no-repeat, url("/favicon.ico") no-repeat'); + }, "multiple backgrounds"); + + test((t) => { + element.style = 'background: url("/favicon.ico") 0% 0% / 10rem;'; + assert_equals(element.style.background , 'url("/favicon.ico") 0% 0% / 10rem'); + }, "background-size with non-initial background-position"); + + test((t) => { + element.style = `background: url(/favicon.ico) top left no-repeat, + url(/favicon.ico) center / 100% 100% no-repeat, + url(/favicon.ico) white;`; + assert_equals(element.style.background , 'url("/favicon.ico") left top no-repeat, url("/favicon.ico") center center / 100% 100% no-repeat, white url("/favicon.ico")'); + }, "multiple backgrounds with varying values"); + + test((t) => { + element.style = `background: padding-box border-box;`; + assert_equals(element.style.background , 'none'); + }, "all initial values"); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-computed.html new file mode 100644 index 0000000000..80fdd0fb27 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundSize</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> +<meta name="assert" content="background-size computed value is a list, each item a pair of sizes (one per axis) each represented as either a keyword or a computed length-percentage value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-size", "1px", "1px auto"); +test_computed_value("background-size", "1px auto", "1px auto"); +test_computed_value("background-size", "2% 3%"); +test_computed_value("background-size", "auto"); +test_computed_value("background-size", "auto auto", "auto"); +test_computed_value("background-size", "auto 4%"); +test_computed_value("background-size", "contain"); +test_computed_value("background-size", "cover"); +test_computed_value("background-size", "calc(10px + 0.5em) calc(10px - 0.5em)", "30px 0px"); +test_computed_value("background-size", "calc(10px - 0.5em) calc(10px + 0.5em)", "0px 30px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-size", "auto 1px, 2% 3%, contain", "auto 1px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-invalid.html new file mode 100644 index 0000000000..01a0322002 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-size with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> +<meta name="assert" content="background-size supports only the grammar '<bg-size>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Blink and WebKit fail these by accepting negative values. +test_invalid_value("background-size", "-1px"); +test_invalid_value("background-size", "2% -3%"); + +test_invalid_value("background-size", "1px 2px 3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-valid.html new file mode 100644 index 0000000000..c169232cb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-size with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> +<meta name="assert" content="background-size supports the full grammar '<bg-size>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-size", "1px", ["1px", "1px auto"]); +test_valid_value("background-size", "1px auto", ["1px", "1px auto"]); +test_valid_value("background-size", "2% 3%"); +test_valid_value("background-size", "auto", ["auto", "auto auto"]); +test_valid_value("background-size", "auto auto", ["auto", "auto auto"]); +test_valid_value("background-size", "auto 4%"); +test_valid_value("background-size", "contain"); +test_valid_value("background-size", "cover"); + +test_valid_value("background-size", "auto 1px, 2% 3%, contain"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html new file mode 100644 index 0000000000..e011c2238d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="background supports the full grammar '<bg-layer># , <final-bg-layer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> + +// Background serialization varies across browsers. https://github.com/w3c/csswg-drafts/issues/418 +test_valid_value("background", + 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', [ + 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', // spec, WebKit + 'url("https://example.com/") local space round 1px 2px / 3px 4px padding-box content-box, url("https://example.com/") local space round 1px 2px / 3px 4px padding-box content-box rgb(5, 6, 7)', // Edge + 'url("https://example.com/") space round local 1px 2px / 3px 4px padding-box content-box, rgb(5, 6, 7) url("https://example.com/") space round local 1px 2px / 3px 4px padding-box content-box', // Firefox + 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box rgb(5, 6, 7)' // Blink +]); + +test_shorthand_value('background', 'none', { + 'background-image': 'none', + 'background-position': '0% 0%', + 'background-size': 'auto', + 'background-repeat': 'repeat', + 'background-attachment': 'scroll', + 'background-origin': 'padding-box', + 'background-clip': 'border-box', + 'background-color': 'transparent', +}) +test_shorthand_value('background', 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', { + 'background-image': 'url("https://example.com/"), url("https://example.com/")', + 'background-position': '1px 2px, 1px 2px', + 'background-size': '3px 4px, 3px 4px', + 'background-repeat': 'space round, space round', + 'background-attachment': 'local, local', + 'background-origin': 'padding-box, padding-box', + 'background-clip': 'content-box, content-box', + 'background-color': 'rgb(5, 6, 7)', +}) + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-computed.html new file mode 100644 index 0000000000..5cff8b3dfa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-computed.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderColor</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color computed value is the computed colors."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: lime; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; +const currentColor = "rgb(0, 255, 0)"; +const red = "rgb(255, 0, 0)"; +const yellow = "rgb(255, 255, 0)"; +const green = "rgb(0, 128, 0)"; +const blue = "rgb(0, 0, 255)"; + +test_computed_value("border-color", "currentcolor", currentColor); +test_computed_value("border-color", "red yellow", red + " " + yellow); +test_computed_value("border-color", "red yellow currentcolor", red + " " + yellow + " " + currentColor); +test_computed_value("border-color", "red yellow green blue", red + " " + yellow + " " + green + " " + blue); + +test_computed_value("border-top-color", "red", red); +test_computed_value("border-right-color", "yellow", yellow); +test_computed_value("border-bottom-color", "green", green); +test_computed_value("border-left-color", "blue", blue); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-invalid.html new file mode 100644 index 0000000000..6e4d28e798 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-color with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color supports only the grammar '<color>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-color", "auto"); + +test_invalid_value("border-color", "black, white"); + +test_invalid_value("border-color", "black white red green blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html new file mode 100644 index 0000000000..012567830e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-color sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color supports the full grammar '<color>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-color', 'currentcolor', { + 'border-top-color': 'currentcolor', + 'border-right-color': 'currentcolor', + 'border-bottom-color': 'currentcolor', + 'border-left-color': 'currentcolor' +}); + +test_shorthand_value('border-color', 'red yellow', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'red', + 'border-left-color': 'yellow' +}); + +test_shorthand_value('border-color', 'red yellow green', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'green', + 'border-left-color': 'yellow' +}); + +test_shorthand_value('border-color', 'red yellow green blue', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'green', + 'border-left-color': 'blue' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-valid.html new file mode 100644 index 0000000000..a4cd7748ac --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color supports the full grammar '<color>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-color", "currentcolor", "currentcolor"); +test_valid_value("border-color", "currentColor", "currentcolor"); + +test_valid_value("border-color", "red yellow green blue"); + +test_valid_value("border-top-color", "red"); +test_valid_value("border-right-color", "yellow"); +test_valid_value("border-bottom-color", "green"); +test_valid_value("border-left-color", "blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-invalid.html new file mode 100644 index 0000000000..273fc0a7bf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-invalid.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image"> +<meta name="assert" content="border-image supports only the grammar ' <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image", "auto"); +test_invalid_value("border-image", 'none, url("http://www.example.com/")'); + +test_invalid_value("border-image", "stretch repeat round"); + +test_invalid_value("border-image", "fill"); +test_invalid_value("border-image", "1 2 3 4 5"); +test_invalid_value("border-image", "1% fill 2%"); + +test_invalid_value("border-image", "1 / -2px"); +test_invalid_value("border-image", "-1 / 2px"); + +test_invalid_value("border-image", "1 / 1 2 3 4 5"); + +test_invalid_value("border-image", "1 2 3 4 5 / / 1px"); +test_invalid_value("border-image", "1 / / auto"); +test_invalid_value("border-image", "1 2% 3 4% / / 1%"); +test_invalid_value("border-image", "1 2% 3 4% fill / / 1 2 3 4 5"); + +test_invalid_value("border-image", "1 / none / 1px"); +test_invalid_value("border-image", "1 2% 3 4% / 1 2 3 4 5 / 2"); +test_invalid_value("border-image", "1 2 3 4 5 / 1px / 1px"); +test_invalid_value("border-image", "1 / 1px / auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-computed.html new file mode 100644 index 0000000000..c026207991 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageOutset</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-outset"> +<meta name="assert" content="border-image-outset computed value is four values, each a number or absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-outset", "1px"); +test_computed_value("border-image-outset", "1px 2"); +test_computed_value("border-image-outset", "1px 2 3px"); +test_computed_value("border-image-outset", "1px 2 3px 4"); +test_computed_value("border-image-outset", "0 calc(0.5em + 10px) 3 calc(-0.5em + 10px)", "0 30px 3 0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-invalid.html new file mode 100644 index 0000000000..4102f60342 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-outset with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-outset"> +<meta name="assert" content="border-image-outset supports only the grammar '[ <length> | <number> ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-outset", "auto"); + +test_invalid_value("border-image-outset", "-1"); +test_invalid_value("border-image-outset", "-2px"); + +test_invalid_value("border-image-outset", "1%"); + +test_invalid_value("border-image-outset", "1 2 3 4 5"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-valid.html new file mode 100644 index 0000000000..ee85af8767 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-outset with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-outset"> +<meta name="assert" content="border-image-outset supports the full grammar '[ <length> | <number> ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-outset", "1px"); +test_valid_value("border-image-outset", "2"); +test_valid_value("border-image-outset", "1px 2 3px 4"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-computed.html new file mode 100644 index 0000000000..95ce8498f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageRepeat</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-repeat"> +<meta name="assert" content="border-image-repeat computed value is specified keywords."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-repeat", "round"); +test_computed_value("border-image-repeat", "stretch repeat"); +test_computed_value("border-image-repeat", "round space"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-invalid.html new file mode 100644 index 0000000000..de0998dcc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-repeat with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-repeat"> +<meta name="assert" content="border-image-repeat supports only the grammar '[ stretch | repeat | round | space ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-repeat", "auto"); + +test_invalid_value("border-image-repeat", "stretch repeat round"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-valid.html new file mode 100644 index 0000000000..f90ef71191 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-repeat with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-repeat"> +<meta name="assert" content="border-image-repeat supports the full grammar '[ stretch | repeat | round | space ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-repeat", "stretch"); +test_valid_value("border-image-repeat", "space space", "space"); +test_valid_value("border-image-repeat", "repeat round"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html new file mode 100644 index 0000000000..37fb998d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-image sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image"> +<meta name="assert" content="border-image supports the full grammar ' <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-image', 'none', { + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', 'url("http://{{host}}/") 1 2 3 4 fill', { + 'border-image-source': 'url("http://{{host}}/")', + 'border-image-slice': '1 2 3 4 fill', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', 'repeat round', { + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'repeat round' +}); + +test_shorthand_value('border-image', 'url("http://{{host}}/") fill 1 2% 3 4%', { + 'border-image-source': 'url("http://{{host}}/")', + 'border-image-slice': '1 2% 3 4% fill', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', '1 2% 3 4% / 5% / 6', { + 'border-image-source': 'none', + 'border-image-slice': '1 2% 3 4%', + 'border-image-width': '5%', + 'border-image-outset': '6', + 'border-image-repeat': 'stretch' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-computed.html new file mode 100644 index 0000000000..bfc8714d98 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageSlice</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice"> +<meta name="assert" content="border-image-slice computed value is four values, each either a number or percentage; plus a fill keyword if specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-slice", "1"); +test_computed_value("border-image-slice", "1 2%"); +test_computed_value("border-image-slice", "1 2% 3"); +test_computed_value("border-image-slice", "1 2% 3 4%"); + +test_computed_value("border-image-slice", "1% 2 3% 4 fill"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-invalid.html new file mode 100644 index 0000000000..6b6e0e9d61 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-slice with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice"> +<meta name="assert" content="border-image-slice supports only the grammar '[<number> | <percentage>]{1,4} && fill?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-slice", "fill"); + +test_invalid_value("border-image-slice", "1 -2% fill"); +test_invalid_value("border-image-slice", "-1 2% fill"); + +test_invalid_value("border-image-slice", "1 2 3 4 5"); + +test_invalid_value("border-image-slice", "1% fill 2%"); + +test_invalid_value("border-image-slice", "-10"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-valid.html new file mode 100644 index 0000000000..671120b41b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-slice with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice"> +<meta name="assert" content="border-image-slice supports the full grammar '[<number> | <percentage>]{1,4} && fill?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-slice", "1"); +test_valid_value("border-image-slice", "1 2% 3 4%"); + +test_valid_value("border-image-slice", "1 2% 3 4% fill"); +test_valid_value("border-image-slice", "fill 1 2% 3 4%", "1 2% 3 4% fill"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-computed.sub.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-computed.sub.html new file mode 100644 index 0000000000..ad48aa987a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-computed.sub.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageSource</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-source"> +<meta name="assert" content="border-image-source computed value is the keyword none or the specified image with URIs made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: blue; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-source", "none"); +test_computed_value("border-image-source", 'url("http://{{host}}/")'); + +test_computed_value('border-image-source', 'linear-gradient(-45deg, red, currentcolor)', 'linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('border-image-source', 'repeating-linear-gradient(-45deg, red, 30%, currentcolor 70%, lime)', 'repeating-linear-gradient(-45deg, rgb(255, 0, 0), 30%, rgb(0, 0, 255) 70%, rgb(0, 255, 0))'); +test_computed_value('border-image-source', 'radial-gradient(10px at 20px 30px, currentcolor, lime)', 'radial-gradient(10px at 20px 30px, rgb(0, 0, 255), rgb(0, 255, 0))'); +test_computed_value('border-image-source', 'conic-gradient(from 90deg at 80% 90%, lime, black)', 'conic-gradient(from 90deg at 80% 90%, rgb(0, 255, 0), rgb(0, 0, 0))'); + +test(() => { + const target = document.getElementById('target'); + target.style['border-image-source'] = 'url("a.b#c")'; + const result = getComputedStyle(target)['border-image-source']; + const resolved = new URL("a.b#c", document.URL).href; + assert_equals(result, 'url("' + resolved + '")'); +}, 'url values are made absolute'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-invalid.html new file mode 100644 index 0000000000..8b1240a0d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-source with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-source"> +<meta name="assert" content="border-image-source supports only the grammar 'none | <image>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-source", "auto"); + +test_invalid_value("border-image-source", 'none, url("http://www.example.com/")'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-valid.html new file mode 100644 index 0000000000..7fbbbd9e95 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-source with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-source"> +<meta name="assert" content="border-image-source supports the full grammar 'none | <image>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-source", "none"); + +// Safari removes quotes. +test_valid_value("border-image-source", 'url("http://www.example.com/")', ['url("http://www.example.com/")', 'url(http://www.example.com/)']); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-valid.html new file mode 100644 index 0000000000..cdd38b0a62 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-valid.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image"> +<meta name="assert" content="border-image supports the full grammar ' <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// WebKit fails all these tests by returning an empty string as the value of border-image. + +// "none" in Edge, "none 100% / 1 / 0 stretch" in Firefox and Blink. +test_valid_value("border-image", "none", ["none", "none 100% / 1 / 0 stretch"]); +test_valid_value("border-image", "stretch", ["stretch", "none", "none 100% / 1 / 0 stretch"]); +test_valid_value("border-image", "none 100% / 1 / 0 stretch", ["none", "none 100% / 1 / 0 stretch"]); + +test_valid_value("border-image", 'url("http://www.example.com/") 1 2 3 4 fill', ['url("http://www.example.com/") 1 2 3 4 fill', 'url("http://www.example.com/") 1 2 3 4 fill / 1 / 0 stretch']); +test_valid_value("border-image", 'url("http://www.example.com/") 1 2 3 4 fill / 1 / 0 stretch', ['url("http://www.example.com/") 1 2 3 4 fill', 'url("http://www.example.com/") 1 2 3 4 fill / 1 / 0 stretch']); + +test_valid_value("border-image", 'url("http://www.example.com/")', ['url("http://www.example.com/")', 'url("http://www.example.com/") 100% / 1 / 0 stretch']); + +test_valid_value("border-image", "repeat round", ["repeat round", "none repeat round", "none 100% / 1 / 0 repeat round"]); +test_valid_value("border-image", "none repeat round", ["repeat round", "none repeat round", "none 100% / 1 / 0 repeat round"]); + +test_valid_value("border-image", "space", ["space", "none space space", "none 100% / 1 / 0 space"]); +test_valid_value("border-image", "none space space", ["space", "none space space", "none space", "none 100% / 1 / 0 space"]); +test_valid_value("border-image", "none 100% / 1 / 0 space", ["space", "none space space", "none 100% / 1 / 0 space"]); + +test_valid_value("border-image", "1", ["1", "none 1 1 1 1", "none 1 / 1 / 0 stretch"]); +test_valid_value("border-image", "none 1 1 1 1", ["1", "none 1 1 1 1", "none 1", "none 1 / 1 / 0 stretch"]); +test_valid_value("border-image", "none 1 / 1 / 0 stretch", ["1", "none 1 1 1 1", "none 1 / 1 / 0 stretch"]); + +test_valid_value("border-image", 'url("http://www.example.com/") 1 2% 3 4%', ['url("http://www.example.com/") 1 2% 3 4%', 'url("http://www.example.com/") 1 2% 3 4% / 1 / 0 stretch']); +test_valid_value("border-image", 'url("http://www.example.com/") 1 2% 3 4% fill', ['url("http://www.example.com/") 1 2% 3 4% fill', 'url("http://www.example.com/") 1 2% 3 4% fill / 1 / 0 stretch']); +test_valid_value("border-image", 'url("http://www.example.com/") fill 1 2% 3 4%', ['url("http://www.example.com/") 1 2% 3 4% fill', 'url("http://www.example.com/") 1 2% 3 4% fill / 1 / 0 stretch']); + +test_valid_value("border-image", "1 / 1px", ["1 / 1px", "none 1 / 1px / 0 stretch"]); +test_valid_value("border-image", "1 2% 3 4% / 2%", ["1 2% 3 4% / 2%", "none 1 2% 3 4% / 2% 2% 2% 2%", "none 1 2% 3 4% / 2% / 0 stretch"]); +test_valid_value("border-image", "1 2% 3 4% fill / 3", ["1 2% 3 4% fill / 3", "none 1 2% 3 4% fill / 3 3 3 3", "none 1 2% 3 4% fill / 3 / 0 stretch"]); +test_valid_value("border-image", "fill 1 2% 3 4% / auto", ["1 2% 3 4% fill / auto", "none 1 2% 3 4% fill / auto / 0 stretch"]); +test_valid_value("border-image", "1 / 1px 2% 3 auto", ["1 / 1px 2% 3 auto", "none 1 / 1px 2% 3 auto / 0 stretch"]); + +test_valid_value("border-image", "1 / / 1px", ["1 / / 1px", "none 1 / 1 / 1px stretch"]); +test_valid_value("border-image", "1 2% 3 4% / / 2", ["1 2% 3 4% / / 2", "none 1 2% 3 4% / 1 / 2 stretch"]); +test_valid_value("border-image", 'url("http://www.example.com/") 1 2% 3 4% fill / / 1px 2 3px 4', ['url("http://www.example.com/") 1 2% 3 4% fill / / 1px 2 3px 4', 'url("http://www.example.com/") 1 2% 3 4% fill / 1 / 1px 2 3px 4 stretch']); + +test_valid_value("border-image", "1 / 1px / 1px", ["1 / 1px / 1px", "none 1 / 1px / 1px stretch"]); +test_valid_value("border-image", "1 2% 3 4% / 2% / 2", ["1 2% 3 4% / 2% / 2", "none 1 2% 3 4% / 2% / 2 stretch"]); +test_valid_value("border-image", "1 2% 3 4% fill / 3 / 1px 2 3px 4", ["1 2% 3 4% fill / 3 / 1px 2 3px 4", "none 1 2% 3 4% fill / 3 / 1px 2 3px 4 stretch"]); +test_valid_value("border-image", "1 / auto / 1px", ["1 / auto / 1px", "none 1 / auto / 1px stretch"]); +test_valid_value("border-image", "1 2% 3 4% / 1px 2% 3 auto / 2", ["1 2% 3 4% / 1px 2% 3 auto / 2", "none 1 2% 3 4% / 1px 2% 3 auto / 2 2 2 2", "none 1 2% 3 4% / 1px 2% 3 auto / 2 stretch"]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-computed.html new file mode 100644 index 0000000000..2c36eda8c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-computed.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> +<meta name="assert" content="border-image-width computed value is four values, each either a number, the keyword auto, or a computed length-percentage value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-width", "0"); +test_computed_value("border-image-width", "1"); +test_computed_value("border-image-width", "auto"); +test_computed_value("border-image-width", "10px"); +test_computed_value("border-image-width", "20%"); +test_computed_value("border-image-width", "calc(20% + 10px)"); +test_computed_value("border-image-width", "calc(-0.5em + 10px)", "0px"); +test_computed_value("border-image-width", "calc(0.5em + 10px)", "30px"); +test_computed_value("border-image-width", "1 auto"); +test_computed_value("border-image-width", "1 auto 10px"); +test_computed_value("border-image-width", "1 auto 10px 20%"); +test_computed_value("border-image-width", "20% 10px auto 1"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-invalid.html new file mode 100644 index 0000000000..b3e9359749 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-width with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> +<meta name="assert" content="border-image-width supports only the grammar '[ <length-percentage> | <number> | auto ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-width", "none"); + +test_invalid_value("border-image-width", "-1px"); +test_invalid_value("border-image-width", "-2%"); +test_invalid_value("border-image-width", "-3"); + +test_invalid_value("border-image-width", "1 2 3 4 5"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-valid.html new file mode 100644 index 0000000000..ce8b9a9455 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-width with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> +<meta name="assert" content="border-image-width supports the full grammar '[ <length-percentage> | <number> | auto ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-width", "1px"); +test_valid_value("border-image-width", "2%"); +test_valid_value("border-image-width", "3"); +test_valid_value("border-image-width", "auto"); + +test_valid_value("border-image-width", "1px 2% 3 auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html new file mode 100644 index 0000000000..870e741f44 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> +<meta name="assert" content="border supports only the grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border", "auto"); +test_invalid_value("border", "thin double green 1px"); +test_invalid_value("border", "-2em"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-computed.html new file mode 100644 index 0000000000..9406d1b171 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-computed.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: getComputedStyle().borderRadius</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<meta name="assert" content="Computed value has computed length-percentage values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-radius", "1px"); +test_computed_value("border-radius", "1px 2% 3px 4%"); +test_computed_value("border-radius", "5em / 1px 2% 3px 4%", "200px / 1px 2% 3px 4%"); +test_computed_value("border-radius", "1px 2% 3px 4% / 5em", "1px 2% 3px 4% / 200px"); + +test_computed_value("border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%"); +test_computed_value("border-radius", "1px 1px 1px 1px / 1px 1px 2% 1px", "1px / 1px 1px 2%"); +test_computed_value("border-radius", "1px 1px 2% 2%"); +test_computed_value("border-radius", "1px 2% 1px 1px"); +test_computed_value("border-radius", "1px 2% 2% 2% / 1px 2% 3px 2%", "1px 2% 2% / 1px 2% 3px"); + +test_computed_value("border-top-left-radius", "calc(-0.5em + 10px)", "0px"); +test_computed_value("border-top-right-radius", "20%"); +test_computed_value("border-bottom-right-radius", "calc(0.5em + 10px) 40%", "30px 40%"); +test_computed_value("border-bottom-left-radius", "50% 60px"); + +test_computed_value("border-top-left-radius", "40px 0px", "40px 0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-invalid.html new file mode 100644 index 0000000000..f6d1bcb081 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-radius with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<meta name="assert" content="border-radius supports only the grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-radius", "auto"); +test_invalid_value("border-radius", "none"); +test_invalid_value("border-radius", "1px 2px 3px 4px 5px"); +test_invalid_value("border-radius", "-1px"); +test_invalid_value("border-radius", "1px -2px"); +test_invalid_value("border-radius", "1em /"); +test_invalid_value("border-radius", "1px / 2px / 3px"); +test_invalid_value("border-radius", "4 / 5"); + +test_invalid_value("border-radius", "5em 1px 5em 2% 5em 3px 5em 4%"); +test_invalid_value("border-radius", "1px 5em 2% 5em 3px 5em 4% 5em"); + +test_invalid_value("border-top-left-radius", "10px 20px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-valid.html new file mode 100644 index 0000000000..584211f09a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-valid.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-radius with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<meta name="assert" content="border-radius supports CSS Wide keywords and the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-radius", "initial"); +test_valid_value("border-radius", "inherit"); +test_valid_value("border-radius", "unset"); +test_valid_value("border-radius", "revert"); + +test_valid_value("border-radius", "1px"); +test_valid_value("border-radius", "1px 5%"); +test_valid_value("border-radius", "1px 2% 3px"); +test_valid_value("border-radius", "1px 2% 3px 4%"); +test_valid_value("border-radius", "1px / 2px"); +test_valid_value("border-radius", "5em / 1px 2% 3px 4%"); +test_valid_value("border-radius", "1px 2% / 3px 4px"); +test_valid_value("border-radius", "1px 2px 3em / 1px 2px 3%"); +test_valid_value("border-radius", "1px 2% / 2px 3em 4px 5em"); +test_valid_value("border-radius", "1px 2% 3px 4% / 5em"); + +test_valid_value("border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%"); +test_valid_value("border-radius", "1px 1px 1px 1px / 1px 1px 2% 1px", "1px / 1px 1px 2%"); +test_valid_value("border-radius", "1px 1px 2% 2%"); +test_valid_value("border-radius", "1px 2% 1px 1px"); +test_valid_value("border-radius", "1px 2% 2% 2% / 1px 2% 3px 2%", "1px 2% 2% / 1px 2% 3px"); + +test_valid_value("border-top-left-radius", "10px"); +test_valid_value("border-top-right-radius", "20%"); +test_valid_value("border-bottom-right-radius", "30px 40%"); +test_valid_value("border-bottom-left-radius", "50% 60px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html new file mode 100644 index 0000000000..487ce876fa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> +<meta name="assert" content="border supports the full grammar '<line-width> || <line-style> || <color>'."> +<meta name="assert" content="The border shorthand also resets border-image to its initial value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +test_invalid_value('border', '2px solid color-mix(42deg)'); +test_invalid_value('border', '2px solid color-contrast(42deg)'); + +test_shorthand_value('border', '5px dotted blue', { + 'border-top-width': '5px', + 'border-right-width': '5px', + 'border-bottom-width': '5px', + 'border-left-width': '5px', + 'border-top-style': 'dotted', + 'border-right-style': 'dotted', + 'border-bottom-style': 'dotted', + 'border-left-style': 'dotted', + 'border-top-color': 'blue', + 'border-right-color': 'blue', + 'border-bottom-color': 'blue', + 'border-left-color': 'blue', + + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-top', 'thin', { + 'border-top-width': 'thin', + 'border-top-style': 'none', + 'border-top-color': 'currentcolor' +}); + +test_shorthand_value('border-right', 'double', { + 'border-right-width': 'medium', + 'border-right-style': 'double', + 'border-right-color': 'currentcolor' +}); + +test_shorthand_value('border-bottom', 'green', { + 'border-bottom-width': 'medium', + 'border-bottom-style': 'none', + 'border-bottom-color': 'green' +}); + +test_shorthand_value('border-left', '1px dotted red', { + 'border-left-width': '1px', + 'border-left-style': 'dotted', + 'border-left-color': 'red' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-computed.html new file mode 100644 index 0000000000..e890be1128 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style computed value is the specified keywords."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-style", "none"); +test_computed_value("border-style", "inset outset"); +test_computed_value("border-style", "hidden dotted dashed"); +test_computed_value("border-style", "solid double groove ridge"); + +test_computed_value("border-top-style", "solid"); +test_computed_value("border-right-style", "double"); +test_computed_value("border-bottom-style", "groove"); +test_computed_value("border-left-style", "ridge"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-invalid.html new file mode 100644 index 0000000000..27fa45116f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-style with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style supports only the grammar '<line-style>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-style", "auto"); +test_invalid_value("border-style", "solid double groove ridge none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html new file mode 100644 index 0000000000..b85804e287 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-style sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style supports the full grammar '<line-style>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-style', 'none', { + 'border-top-style': 'none', + 'border-right-style': 'none', + 'border-bottom-style': 'none', + 'border-left-style': 'none' +}); + +test_shorthand_value('border-style', 'inset outset', { + 'border-top-style': 'inset', + 'border-right-style': 'outset', + 'border-bottom-style': 'inset', + 'border-left-style': 'outset' +}); + +test_shorthand_value('border-style', 'hidden dotted dashed', { + 'border-top-style': 'hidden', + 'border-right-style': 'dotted', + 'border-bottom-style': 'dashed', + 'border-left-style': 'dotted' +}); + +test_shorthand_value('border-style', 'solid double groove ridge', { + 'border-top-style': 'solid', + 'border-right-style': 'double', + 'border-bottom-style': 'groove', + 'border-left-style': 'ridge' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-valid.html new file mode 100644 index 0000000000..0b59218028 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-style with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style supports the full grammar '<line-style>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-style", "none"); +test_valid_value("border-style", "none hidden dotted dashed"); +test_valid_value("border-style", "solid double groove ridge"); +test_valid_value("border-style", "inset outset"); + +test_valid_value("border-top-style", "solid"); +test_valid_value("border-right-style", "double"); +test_valid_value("border-bottom-style", "groove"); +test_valid_value("border-left-style", "ridge"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html new file mode 100644 index 0000000000..8c52b428ba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> +<meta name="assert" content="border supports the full grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border", "1px dotted red"); +test_valid_value("border", "green double thin", "thin double green"); + +test_valid_value("border-top", "thin", ["thin", "thin none"]); +test_valid_value("border-right", "double", ["double", "medium double"]); +test_valid_value("border-bottom", "green", ["green", "medium none green"]); +test_valid_value("border-left", "1px dotted red"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-computed.html new file mode 100644 index 0000000000..ab4169ea99 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-computed.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width computed value is the absolute length; zero if the border style is none or hidden."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #box { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + border-top-width: thin; + border-right-width: medium; + border-bottom-width: thick; + } + #target { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + font-size: 40px; + } +</style> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<script> +'use strict'; +const box = document.getElementById('box'); +const thinWidth = getComputedStyle(box).borderTopWidth; +const mediumWidth = getComputedStyle(box).borderRightWidth; +const thickWidth = getComputedStyle(box).borderBottomWidth; + +test_computed_value("border-width", "1px"); +test_computed_value("border-width", "1px 2px"); +test_computed_value("border-width", "1px 2px 3px"); +test_computed_value("border-width", "1px 2px 3px 4px"); + +test_computed_value("border-width", "0.5em", "20px"); +test_computed_value("border-width", "2px thin medium thick", "2px " + thinWidth + " " + mediumWidth + " " + thickWidth); + +test_computed_value("border-top-width", "0px"); +test_computed_value("border-right-width", "10px"); +test_computed_value("border-bottom-width", "calc(-0.5em + 10px)", "0px"); +test_computed_value("border-left-width", "calc(0.5em + 10px)", "30px"); + +test(() => { + const thin = Number(thinWidth.replace("px", "")); + const medium = Number(mediumWidth.replace("px", "")); + const thick = Number(thickWidth.replace("px", "")); + assert_less_than_equal(0, thin); + assert_less_than_equal(thin, medium); + assert_less_than_equal(medium, thick); +}, "thin ≤ medium ≤ thick"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-invalid.html new file mode 100644 index 0000000000..ec7eb72a9a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-width with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width supports only the grammar '<line-width>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-width", "none"); +test_invalid_value("border-width", "thin medium thick medium thin"); +test_invalid_value("border-width", "-1px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html new file mode 100644 index 0000000000..07461bc94d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-width sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width supports the full grammar '<line-width>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-width', '5px', { + 'border-top-width': '5px', + 'border-right-width': '5px', + 'border-bottom-width': '5px', + 'border-left-width': '5px' +}); + +test_shorthand_value('border-width', 'thick thin', { + 'border-top-width': 'thick', + 'border-right-width': 'thin', + 'border-bottom-width': 'thick', + 'border-left-width': 'thin' +}); + +test_shorthand_value('border-width', 'thin medium thick', { + 'border-top-width': 'thin', + 'border-right-width': 'medium', + 'border-bottom-width': 'thick', + 'border-left-width': 'medium' +}); + +test_shorthand_value('border-width', '1px 2px 3px 4px', { + 'border-top-width': '1px', + 'border-right-width': '2px', + 'border-bottom-width': '3px', + 'border-left-width': '4px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-valid.html new file mode 100644 index 0000000000..552416df3d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-width with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width supports the full grammar '<line-width>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-width", "1em"); +test_valid_value("border-width", "2px thin medium thick"); + +test_valid_value("border-top-width", "0px"); +test_valid_value("border-right-width", "thin"); +test_valid_value("border-bottom-width", "medium"); +test_valid_value("border-left-width", "thick"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-computed.html new file mode 100644 index 0000000000..5d268bf3fd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: getComputedStyle().boxShadow</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#box-shadow"> +<meta name="assert" content="box-shadow computes to none or a list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: blue; + font-size: 20px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; +const currentColor = 'rgb(0, 0, 255)'; +test_computed_value('box-shadow', 'none'); +test_computed_value('box-shadow', '1px 2px', currentColor + ' 1px 2px 0px 0px'); +test_computed_value('box-shadow', 'currentcolor -1em -2em 3em -4em', currentColor + ' -20px -40px 60px -80px'); +test_computed_value('box-shadow', 'rgb(0, 255, 0) 1px 2px 3px 4px inset'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-invalid.html new file mode 100644 index 0000000000..74e7b0db80 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-invalid.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing box-shadow with invalid values</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#box-shadow"> +<meta name="assert" content="box-shadow supports only the grammar 'none | <shadow>#'."> +<meta name="assert" content="Lengths must stay adjacent." /> +<meta name="assert" content="<blur-radius> must be non-negative." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("box-shadow", "auto"); +test_invalid_value("box-shadow", "1 2"); +test_invalid_value("box-shadow", "1% 2%"); +test_invalid_value("box-shadow", "1px calc(2px + 2%)"); + +test_invalid_value("box-shadow", "1px"); + +test_invalid_value("box-shadow", "1px 2px 3px 4px 5px"); +test_invalid_value("box-shadow", "red 1px 2px blue"); + + +test_invalid_value("box-shadow", "red"); +test_invalid_value("box-shadow", "4px red"); +test_invalid_value("box-shadow", "red 4px"); +test_invalid_value("box-shadow", "-4px red 4px"); +test_invalid_value("box-shadow", "red -4px 4px red"); +test_invalid_value("box-shadow", "-4px 4px red 0"); +test_invalid_value("box-shadow", "-4px 4px 0 red 0"); +test_invalid_value("box-shadow", "inset"); +test_invalid_value("box-shadow", "inset 4px"); +test_invalid_value("box-shadow", "4px inset"); +test_invalid_value("box-shadow", "4px inset -4px"); +test_invalid_value("box-shadow", "inset 4px -4px inset"); +test_invalid_value("box-shadow", "4px -4px inset 0"); +test_invalid_value("box-shadow", "4px -4px 0 inset 0"); +test_invalid_value("box-shadow", "red inset"); +test_invalid_value("box-shadow", "inset red"); +test_invalid_value("box-shadow", "4px red inset"); +test_invalid_value("box-shadow", "red inset 4px"); +test_invalid_value("box-shadow", "4px inset red"); +test_invalid_value("box-shadow", "inset red 4px"); +test_invalid_value("box-shadow", "4px red inset -4px"); +test_invalid_value("box-shadow", "4px inset red -4px"); +test_invalid_value("box-shadow", "inset 4px red -4px"); +test_invalid_value("box-shadow", "4px red 4px inset"); +test_invalid_value("box-shadow", "red 4px inset -4px"); +test_invalid_value("box-shadow", "4px inset -4px red"); +test_invalid_value("box-shadow", "4px -4px red inset 0"); +test_invalid_value("box-shadow", "4px -4px inset red 0"); +test_invalid_value("box-shadow", "inset 4px -4px red 0"); +test_invalid_value("box-shadow", "4px -4px red 0 inset"); +test_invalid_value("box-shadow", "red 4px -4px inset 0"); +test_invalid_value("box-shadow", "4px -4px inset 0 red"); + +// <blur-radius> must be non-negative +test_invalid_value("box-shadow", "1px 1px -1px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-valid.html new file mode 100644 index 0000000000..901b0a0ad2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-valid.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing box-shadow with valid values</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#box-shadow"> +<meta name="assert" content="box-shadow supports the full grammar 'none | <shadow>#'."> +<meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("box-shadow", "none"); +test_valid_value("box-shadow", "1px 2px"); +test_valid_value("box-shadow", "red 1px 2px 3px -4px inset"); // Edge serializes as "inset 1px 2px 3px -4px red" +test_valid_value("box-shadow", "inset 1px 2px red", "red 1px 2px inset"); +test_valid_value("box-shadow", "1px -2px inset, red -3px 4px"); // Edge serializes as "inset 1px -2px, -3px 4px red" +test_valid_value("box-shadow", "inset 1px -2px, -3px 4px red", "1px -2px inset, red -3px 4px"); + + +// color only +test_valid_value("box-shadow", "4px 4px green", "green 4px 4px"); +test_valid_value("box-shadow", "green -4px 4px", "green -4px 4px"); +test_valid_value("box-shadow", "-4px 4px 0 green", "green -4px 4px 0px"); +test_valid_value("box-shadow", "green -4px 4px 0", "green -4px 4px 0px"); +test_valid_value("box-shadow", "-4px 4px 0 0 green", "green -4px 4px 0px 0px"); +test_valid_value("box-shadow", "green -4px 4px 0 0", "green -4px 4px 0px 0px"); + +// inset only +test_valid_value("box-shadow", "4px -4px inset", "4px -4px inset"); +test_valid_value("box-shadow", "inset 4px -4px", "4px -4px inset"); +test_valid_value("box-shadow", "4px -4px 0 inset", "4px -4px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0", "4px -4px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 0 inset", "4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0 0", "4px -4px 0px 0px inset"); + +// color and inset +test_valid_value("box-shadow", "4px -4px green inset", "green 4px -4px inset"); +test_valid_value("box-shadow", "4px -4px inset green", "green 4px -4px inset"); +test_valid_value("box-shadow", "inset green 4px -4px", "green 4px -4px inset"); +test_valid_value("box-shadow", "green inset 4px -4px", "green 4px -4px inset"); +test_valid_value("box-shadow", "green 4px -4px inset", "green 4px -4px inset"); +test_valid_value("box-shadow", "inset 4px -4px green", "green 4px -4px inset"); +test_valid_value("box-shadow", "inset green 4px -4px 0", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "green inset 4px -4px 0", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 green inset", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 inset green", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "green 4px -4px 0 inset", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0 green", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "inset green 4px -4px 0 0", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "green inset 4px -4px 0 0", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 0 green inset", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 0 inset green", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "green 4px -4px 0 0 inset", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0 0 green", "green 4px -4px 0px 0px inset"); + +// No parse-time range-checking for <blur-radius> given as a math function +// https://drafts.csswg.org/css-values-4/#calc-range +test_valid_value("box-shadow", "1px 1px calc(-1px)", "1px 1px calc(-1px)"); +test_valid_value("box-shadow", "1px 1px calc(1em - 2px)", "1px 1px calc(1em - 2px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/webkit-border-radius-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/webkit-border-radius-valid.html new file mode 100644 index 0000000000..cdf570b4e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/webkit-border-radius-valid.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Compatibility: parsing -webkit-border-radius with valid values</title> +<link rel="help" href="https://compat.spec.whatwg.org/#propdef--webkit-border-radius"> +<link rel="help" href="https://github.com/whatwg/compat/issues/133"> +<meta name="assert" content="-webkit-border-radius supports CSS Wide keywords and the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_valid_value("-webkit-border-radius", "initial"); +test_valid_value("-webkit-border-radius", "inherit"); +test_valid_value("-webkit-border-radius", "unset"); +test_valid_value("-webkit-border-radius", "revert"); + +test_valid_value("-webkit-border-radius", "1px"); +test_valid_value("-webkit-border-radius", "1px 5%", ["1px 5%", "1px / 5%"]); +test_valid_value("-webkit-border-radius", "1px 2% 3px"); +test_valid_value("-webkit-border-radius", "1px 2% 3px 4%"); +test_valid_value("-webkit-border-radius", "1px / 2px", ["1px 2px", "1px / 2px"]); +test_valid_value("-webkit-border-radius", "5em / 1px 2% 3px 4%"); +test_valid_value("-webkit-border-radius", "1px 2% / 3px 4px"); +test_valid_value("-webkit-border-radius", "1px 2px 3em / 1px 2px 3%"); +test_valid_value("-webkit-border-radius", "1px 2% / 2px 3em 4px 5em"); +test_valid_value("-webkit-border-radius", "1px 2% 3px 4% / 5em"); + +test_valid_value("-webkit-border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%"); +test_valid_value("-webkit-border-radius", "1px 1px 1px 1px / 1px 1px 2% 1px", "1px / 1px 1px 2%"); +test_valid_value("-webkit-border-radius", "1px 1px 2% 2%"); +test_valid_value("-webkit-border-radius", "1px 2% 1px 1px"); +test_valid_value("-webkit-border-radius", "1px 2% 2% 2% / 1px 2% 3px 2%", "1px 2% 2% / 1px 2% 3px"); + +test_valid_value("-webkit-border-top-left-radius", "10px"); +test_valid_value("-webkit-border-top-right-radius", "20%"); +test_valid_value("-webkit-border-bottom-right-radius", "30px 40%"); +test_valid_value("-webkit-border-bottom-left-radius", "50% 60px"); + +// Some browsers treat '-webkit-border-radius: l1 l2' as 'border-radius: l1 / l2'. +// Regardless of whether this is done, ensure that there is round-tripping. +const target = document.getElementById("target"); +const style = target.style; +const cs = getComputedStyle(target); +test(function() { + style.cssText = "-webkit-border-radius: 1px 2px"; + const oldLonghands = [...style].map(p => p + ": " + style[p]); + const value = style.getPropertyValue("border-radius"); + assert_in_array(value, ["1px 2px", "1px / 2px"]); + assert_equals(cs.getPropertyValue("border-radius"), value); + style.cssText = "border-radius: " + value; + const newLonghands = [...style].map(p => p + ": " + style[p]); + assert_array_equals(newLonghands, oldLonghands); +}, "Serialize border-radius from -webkit-border-radius: 1px 2px"); +test(function() { + style.cssText = "border-radius: 1px 2px"; + const oldLonghands = [...style].map(p => p + ": " + style[p]); + const value = style.getPropertyValue("-webkit-border-radius"); + assert_in_array(value, ["1px 2px", "1px 2px 1px"]); + assert_equals(cs.getPropertyValue("-webkit-border-radius"), value); + style.cssText = "-webkit-border-radius: " + value; + const newLonghands = [...style].map(p => p + ": " + style[p]); + assert_array_equals(newLonghands, oldLonghands); +}, "Serialize -webkit-border-radius from border-radius: 1px 2px"); +</script> +</body> +</html> 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-fixed-block-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-fixed-block-002-ref.html new file mode 100644 index 0000000000..4360def17f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-fixed-block-002-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 50vh; + margin: 0px; + } + + div#filler-before + { + height: 100vh; + } + + div#lime + { + background-color: lime; + height: 25vh; + } + + div#purple + { + background-color: purple; + height: 25vh; + } + + div#filler-after + { + height: 50vh; + } + </style> + + <body onload="window.scroll(0, document.body.offsetHeight);"> + + <div id="filler-before"></div> + + <div id="lime"></div> + + <div id="purple"></div> + + <div id="filler-after"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-fixed-inline-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-fixed-inline-002-ref.html new file mode 100644 index 0000000000..cfa97edd21 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-fixed-inline-002-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 50vh; + margin: 0px; + } + + div#filler-before + { + height: 125vh; + } + + div#purple + { + background-color: purple; + height: 25vh; + width: 50vh; + } + + div#filler-after + { + height: 50vh; + } + </style> + + <body onload="window.scroll(0, document.body.offsetHeight);"> + + <div id="filler-before"></div> + + <div id="purple"></div> + + <div id="filler-after"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-block-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-block-002-ref.html new file mode 100644 index 0000000000..501d70ea9f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-block-002-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 50vh; + margin: 0px; + } + + div#filler-before + { + height: 100vh; + } + + div#blue + { + background-color: blue; + height: 25vh; + } + + div#orange + { + background-color: orange; + height: 25vh; + } + + div#filler-after + { + height: 50vh; + } + </style> + + <body onload="window.scroll(0, document.body.offsetHeight);"> + + <div id="filler-before"></div> + + <div id="blue"></div> + + <div id="orange"></div> + + <div id="filler-after"></div> 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-attachment-local-inline-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-inline-002-ref.html new file mode 100644 index 0000000000..3893b167f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-inline-002-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 50vh; + margin: 0px; + } + + div#filler-before + { + height: 125vh; + } + + div#blue + { + background-color: blue; + height: 12.5vh; + width: 50vh; + } + + div#orange + { + background-color: orange; + height: 12.5vh; + width: 50vh; + } + + div#filler-after + { + height: 50vh; + } + </style> + + <body onload="window.scroll(0, document.body.offsetHeight);"> + + <div id="filler-before"></div> + + <div id="blue"></div> + + <div id="orange"></div> + + <div id="filler-after"></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-clip-padding-box-with-border-radius-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-ref.html new file mode 100644 index 0000000000..545b80d351 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference File</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + border-radius: 30px; + height: 144px; + margin-left: 18px; + margin-top: 24px; + width: 144px; + } + + div + div + { + margin-top: 6px; + } + </style> + + <p>Test passes if there are two filled green rounded squares and <strong>no red</strong>. + + <div></div> + + <div></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-006-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-006-ref.html new file mode 100644 index 0000000000..8e5ef401ec --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-006-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <style> + table + { + border-spacing: 0px; + table-layout: fixed; + } + + td + { + padding: 0px; + } + + td.green-square + { + background-color: green; + height: 25px; + width: 25px; + } + + td#blue-square + { + border: blue solid 1px; + height: 48px; + width: 48px; + } + </style> + + <p>Test passes if there is an hollow blue square with smaller filled green squares at its corners and <strong>no red</strong>. + + <table> + + <tr><td class="green-square"><td><td class="green-square"> + + <tr><td><td id="blue-square"><td> + + <tr><td class="green-square"><td><td class="green-square"> + + </table> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-007-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-007-ref.html new file mode 100644 index 0000000000..9200edd797 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-007-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <style> + div.outer + { + height: 20px; + margin-bottom: 16px; + width: 20px; + } + + div.inside + { + background-color: blue; + height: 12px; + margin: 2px 4px 6px 8px; + width: 8px; + } + + div#first-subtest + { + border: green solid 1px; + padding: 39px; + } + + div#second-subtest + { + border-top: green solid 1px; + border-right: green solid 5px; + border-bottom: green solid 1px; + border-left: green solid 5px; + padding: 39px 35px; + } + + div#third-subtest + { + border-top: green solid 1px; + border-right: green solid 5px; + border-bottom: green solid 10px; + border-left: green solid 5px; + padding: 39px 35px 30px; + } + + div#fourth-subtest + { + border-top: green solid 1px; + border-right: green solid 5px; + border-bottom: green solid 10px; + border-left: green solid 15px; + padding: 39px 35px 30px 25px; + } + </style> + + <div class="outer" id="first-subtest"><div class="inside"></div></div> + + <div class="outer" id="second-subtest"><div class="inside"></div></div> + + <div class="outer" id="third-subtest"><div class="inside"></div></div> + + <div class="outer" id="fourth-subtest"><div class="inside"></div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-012-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-012-ref.html new file mode 100644 index 0000000000..c11db01401 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-012-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> + + <meta charset="utf-8"> + + <title>CSS Reftest reference</title> + + <style> + div + { + background-color: green; + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if there is a filled green square and if it has <strong>no scrollbar</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-013-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-013-ref.html new file mode 100644 index 0000000000..789afe1a7a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-013-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> + + <meta charset="utf-8"> + + <title>CSS Reference Test</title> + + <!-- + + Author is Chris Nardi + + --> + + <style> + .borderContainer + { + height: 50px; + position: relative; + width: 50px; + } + + .borderContainer > div + { + background-image: url("../support/green-dot.png"); + height: 10px; + position: absolute; + width: 10px; + } + + .left + { + left: 0px; + } + + .left1 + { + left: 10px; + } + + .left2 + { + left: 20px; + } + + .left3 + { + left: 30px; + } + + .right + { + right: 0px; + } + + .top + { + top: 0px; + } + + .top1 + { + top: 10px; + } + + .top2 + { + top: 20px; + } + + .top3 + { + top: 30px; + } + + .bottom + { + bottom: 0px; + } + </style> + + <p>Pass if the square has borders made of green dots and <strong>no red</strong>. + + <div class="borderContainer"> + <div class="top left"></div><div class="top left1"></div><div class="top left2"></div><div class="top left3"></div><div class="top right"></div> + <div class="left top1"></div><div class="right top1"></div> + <div class="left top2"></div><div class="right top2"></div> + <div class="left top3"></div><div class="right top3"></div> + <div class="bottom left"></div><div class="bottom left1"></div><div class="bottom left2"></div><div class="bottom left3"></div><div class="bottom right"></div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-001-ref.html new file mode 100644 index 0000000000..feb1301847 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: 50px double red; + border-image-slice: 20 15 10 5; + border-image-source: url("../support/9-colored-areas-40-30-20-10.png"); + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if there is an hollow square with thick borders made of 8 different colors (yellow, blue, aqua, orange, teal, fuchsia, purple and black) and if there is <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-002-ref.html new file mode 100644 index 0000000000..3fc7646417 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-002-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: 50px double red; + border-image-slice: 40% 30% 20% 10%; + border-image-source: url("../support/9-colored-areas-40-30-20-10.png"); + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if there is an hollow square with thick borders made of 8 different colors (yellow, blue, aqua, orange, teal, fuchsia, purple and black) and if there is <strong>no red</strong>. + + <!-- + + Expected result: + + +------------------+ + |yel| blue |aqu| + |- - - - - - - - - | + |or | | t | + | a | | e | + | n | | a | + |ge | | l | + |- - - - - - - - - | + |fuc| purple |bla| + +------------------+ + + --> + + <div></div> 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-image-type-004-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-004-ref.html new file mode 100644 index 0000000000..b1266827bf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-004-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: 50px double red; + border-image-slice: 40 30 20 10; + border-image-source: url("../support/9-colored-areas-40-30-20-10.png"); + height: 0px; + width: 0px; + } + </style> + + <p>Test passes if there is a filled yellow square, then, on its right-hand side, a contiguous filled aqua square, then, below, a contiguous filled fuchsia square and finally a filled black square and <strong>no red</strong>. + + <div></div> + + <!-- + + Expected result: + + (0,100) (50,100) (100,100) + + - - - - - - -+ + | ^ | + |Yellow50 Aqua | + | v | + | - - - - - - -| + | ^ | + |Fuchsi50 Black| + | v | + | - - - - - - -| + (0,0) (100,0) + + --> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-002-ref.html new file mode 100644 index 0000000000..e295a5c65d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-002-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + table + { + border-spacing: 0px; + margin: 70px; + table-layout: fixed; + } + + td + { + height: 40px; + 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: 34px 40px; + } + + td.second-row + { + background-size: 40px 34px; + height: 102px; + } + </style> + + <p>Test passes if there are three whole blue diamonds without clipping on four sides of the border. + + <table> + + <col width="40"><col width="102"><col width="40"> + + <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/border-image-repeat-004-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-004-ref.html new file mode 100644 index 0000000000..9c3f717663 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-004-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + table + { + border-spacing: 0px; + margin: 70px; + table-layout: fixed; + } + + td + { + height: 40px; + 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: 100px 40px; + } + + td.second-row + { + background-size: 40px 100px; + height: 100px; + } + </style> + + <p>Test passes if there is only one (and streched) blue diamond on each side of the border. + + <table> + + <col width="40"><col width="100"><col width="40"> + + <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/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-repeat-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-repeat-001-ref.html new file mode 100644 index 0000000000..0086544c0f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-repeat-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + } + + div.vertical + { + height: 75px; + margin-left: 75px; + width: 50px; + } + + div.horizontal + { + height: 50px; + width: 200px; + } + </style> + + <p>Test passes if there are 2 identical filled green plus ("+") signs and <strong>no red</strong>. + + <div class="vertical"></div> + + <div class="horizontal"></div> + + <div class="vertical" style="margin-bottom: 10px;"></div> + + <div class="vertical"></div> + + <div class="horizontal"></div> + + <div class="vertical"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-003-ref.html new file mode 100644 index 0000000000..4b63a4c032 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-003-ref.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#first-subtest + { + background-color: black; + display: inline-table; + margin-right: 1em; + table-layout: fixed; + + height: 224px; + width: 224px; + } + + div#second-subtest + { + background-color: black; + display: inline-table; + table-layout: fixed; + + height: 208px; + width: 208px; + } + + div#third-subtest + { + background-color: black; + display: inline-table; + margin-top: 1em; + table-layout: fixed; + + height: 272px; + width: 296px; + } + </style> + + <div id="first-subtest"> + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + </div> + + <div id="second-subtest" style="vertical-align: bottom;"> + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + </div><br> + + <div id="third-subtest"> + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0px 28px, purple 28px 56px, yellow 56px 84px, purple 84px 112px, yellow 112px 140px, purple 140px 168px, yellow 168px 196px, purple 196px 224px);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0px 28px, purple 28px 56px, yellow 56px 84px, purple 84px 112px, yellow 112px 140px, purple 140px 168px, yellow 168px 196px, purple 196px 224px);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </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-repeat-round-stretch-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-stretch-001-ref.html new file mode 100644 index 0000000000..32253750f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-stretch-001-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#first-subtest + { + background-color: black; + display: inline-table; + margin-right: 1em; + table-layout: fixed; + + height: 320px; + width: 224px; + } + + div#second-subtest + { + background-color: black; + display: inline-table; + table-layout: fixed; + + height: 256px; + width: 208px; + } + </style> + + <div id="first-subtest"> + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + </div> + + <div id="second-subtest" style="vertical-align: bottom;"> + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-space-011-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-space-011-ref.html new file mode 100644 index 0000000000..226140d152 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-space-011-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + table + { + border-spacing: 32px; + margin: -32px 0px 0px -32px; + } + + td + { + height: 100px; + padding: 0px; + width: 100px; + } + </style> + + <table> + + <tr> + <td style="background-color: black;"><td style="background-color: gray;"><td style="background-color: gray;"><td style="background-color: black;"> + + <tr> + <td style="background-color: blue;"><td><td><td style="background-color: purple;"> + + <tr> + <td style="background-color: blue;"><td><td><td style="background-color: purple;"> + + <tr> + <td style="background-color: black;"><td style="background-color: orange;"><td style="background-color: orange;"><td style="background-color: black;"> + + </table> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-stretch-round-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-stretch-round-001-ref.html new file mode 100644 index 0000000000..931dd3be5e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-stretch-round-001-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#first-subtest + { + background-color: black; + display: inline-table; + margin-right: 1em; + table-layout: fixed; + + height: 224px; + width: 320px; + } + + div#second-subtest + { + background-color: black; + display: inline-table; + table-layout: fixed; + + height: 208px; + width: 256px; + } + </style> + + <div id="first-subtest"> + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + </div> + + <div id="second-subtest" style="vertical-align: bottom;"> + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div> + </div> + + <div style="display: table-row;"> + <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> + </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-004-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-004-ref.html new file mode 100644 index 0000000000..d9c798a616 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-004-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: green solid 30px; + height: 100px; + margin: 50px; + width: 100px; + } + </style> + + <p>Test passes if there is no red color visible on the page. + + <div></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-006-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-006-ref.html new file mode 100644 index 0000000000..d431267573 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-006-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <style> + div + { + background-color: green; + height: 30px; + margin: 50px; + position: relative; + width: 30px; + } + + div#top-right + { + left: 130px; + bottom: 80px; + } + + div#bottom-left + { + bottom: 30px; + } + + div#bottom-right + { + left: 130px; + bottom: 110px; + } + </style> + + <p>Test passes if there are four identical green squares and <strong>no red</strong>. + + <div id="top-left"></div><div id="top-right"></div><div id="bottom-left"></div><div id="bottom-right"></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-slice-fill-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-fill-001-ref.html new file mode 100644 index 0000000000..2ee68cd475 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-fill-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + height: 100px; + margin-left: 50px; + margin-top: 66px; + width: 100px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-fill-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-fill-002-ref.html new file mode 100644 index 0000000000..f8a781c253 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-fill-002-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#outer-yellow + { + background-color: yellow; + height: 100px; + padding: 50px; + width: 100px; + } + + div#inner-green + { + background-color: green; + height: 100px; + } + </style> + + <p>Test passes if there is a filled green square surrounded by a yellow square and if there is <strong>no red</strong>. + + <div id="outer-yellow"> + <div id="inner-green"></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-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-width-001-ref.html new file mode 100644 index 0000000000..a3e1a91eef --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-width-001-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <style> + div.subtest + { + background-color: green; + height: 120px; + margin: 8px auto 8px 0px; + width: 120px; + } + + div > div + { + background-color: lime; + position: relative; + } + + div#subtest1 > div + { + height: 75px; + left: 15px; + top: 30px; + width: 80px; + } + + div#subtest2 > div + { + height: 60px; + left: 10px; + top: 30px; + width: 100px; + } + + div#subtest3 > div + { + height: 75px; + left: 15px; + top: 30px; + width: 80px; + } + + div#subtest4 > div + { + height: 90px; + left: 25px; + top: 15px; + width: 70px; + } + </style> + + <div class="subtest" id="subtest1"><div></div></div> + + <div class="subtest" id="subtest2"><div></div></div> + + <div class="subtest" id="subtest3" style="height: 135px; width: 110px;"><div></div></div> + + <div class="subtest" id="subtest4"><div></div></div> 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-border-radius-001-notref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-border-radius-001-notref.html new file mode 100644 index 0000000000..fd0c1eb803 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-border-radius-001-notref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <style> + div + { + background-color: black; + border-radius: 4px; + height: 300px; + width: 300px; + } + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-border-radius-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-border-radius-001-ref.html new file mode 100644 index 0000000000..ff99f43fee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-border-radius-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <style> + div + { + background-color: black; + border-radius: 50%; + height: 300px; + width: 300px; + } + </style> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-without-border-radius-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-without-border-radius-ref.html new file mode 100644 index 0000000000..dca329fafe --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-without-border-radius-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border-color: black; + border-style: solid; + display: inline-block; + margin: 8px 8px 16px 16px; + vertical-align: top; + } + + </style> + + <div id="first-subtest" style="border-width: 10px 0px 0px 10px; height: 54px; width: 54px; margin-left: 8px;"></div><div id="second-subtest" style="border-width: 25px 5px 5px 25px; height: 34px; width: 34px;"></div><div id="third-subtest" style="border-width: 0px 0px 10px 10px; height: 54px; width: 54px;"></div><div id="fourth-subtest" style="border-width: 5px 5px 25px 25px; height: 34px; width: 34px;"></div><br> + + <div id="fifth-subtest" style="border-width: 10px 10px 0px 0px; height: 54px; width: 54px; margin-left: 8px;"></div><div id="sixth-subtest" style="border-width: 25px 25px 5px 5px; height: 34px; width: 34px;"></div><div id="seventh-subtest" style="border-width: 0px 10px 10px 0px; height: 54px; width: 54px;"></div><div id="eighth-subtest" style="border-width: 5px 25px 25px 5px; height: 34px; width: 34px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-multiple-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-multiple-001-ref.html new file mode 100644 index 0000000000..ada9dbac1f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-multiple-001-ref.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + color: transparent; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + + div.purple + { + text-shadow: 1em 0em purple; + } + + div.orange-blue + { + color: yellow; + margin-left: 1em; + text-shadow: -1em 0em orange, 1em 0em blue; + } + + div.fuchsia + { + margin-bottom: 0.2em; + text-shadow: 1em 0em fuchsia; + } + + div#third-top + { + text-shadow: 1em 0em #BF7F7F; + } + + div#third-horiz-left-right + { + color: yellow; + margin-left: 1em; + text-shadow: -1em 0em #FFD23F , 1em 0em #7F7FBF; + } + + div#third-bottom + { + text-shadow: 1em 0em #FF7FBF; + } + </style> + + <div class="purple">U</div> + + <div class="orange-blue">B</div> + + <div class="fuchsia">F</div> + + + <div class="purple">U</div> + + <div class="orange-blue">B</div> + + <div class="fuchsia">F</div> + + + <div id="third-top">T</div> + + <div id="third-horiz-left-right">H</div> + + <div id="third-bottom">B</div> + + + <!-- + + The top first 2 are: + + ......... + . . + . . <-purple + . . + ....................... + . . . . + orange-> . . yel . . <-blue + . . low . . + ....................... + . . + . . <-fuchsia + . . + ......... + + The bottom one is: + + ......... + . . + . . <-#BF7F7F + . . + ....................... + . . . . + #FFD23F-> . . yel . . <-#7F7FBF + . . low . . + ....................... + . . + . . <-#FF7FBF + . . + ......... + + --> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-without-border-radius-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-without-border-radius-001-ref.html new file mode 100644 index 0000000000..7dfef37a70 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-without-border-radius-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border-color: black; + border-style: solid; + display: inline-block; + vertical-align: top; + } + </style> + + <div id="first-subtest" style="border-width: 0px 10px 10px 0px; height: 70px; width: 70px; margin: 42px 0px 0px 30px;"></div><div id="second-subtest" style="border-width: 5px 25px 25px 5px; height: 80px; width: 80px; margin: 27px 0px 0px 25px;"></div><div id="third-subtest" style="border-width: 10px 10px 0px 0px; height: 70px; width: 70px; margin: 22px 0px 0px 25px;"></div><div id="fourth-subtest" style="border-width: 25px 25px 5px 5px; height: 80px; width: 80px; margin: 7px 0px 0px 25px;"></div><br> + + <div id="fifth-subtest" style="border-width: 0px 0px 10px 10px; height: 70px; width: 70px; margin: 49px 0px 0px 10px;"></div><div id="sixth-subtest" style="border-width: 5px 5px 25px 25px; height: 80px; width: 80px; margin: 34px 0px 0px 25px;"></div><div id="seventh-subtest" style="border-width: 10px 0px 0px 10px; height: 70px; width: 70px; margin: 29px 0px 0px 25px;"></div><div id="eighth-subtest" style="border-width: 25px 5px 5px 25px; height: 80px; width: 80px; margin: 14px 0px 0px 25px;"></div> 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-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css-border-radius-001-ref.html new file mode 100644 index 0000000000..ef851137ed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css-border-radius-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS border-radius Test</title> + <style type="text/css"> + .blueSquare{ + position: absolute; + top:50px; + left:50px; + width: 100px; + height: 100px; + background-color:rgba(0, 0, 255, 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 the green circle is inscribed in the blue square.</p> + <div class="container"> + <!-- This is the square that has a inscribed circle if the test passes --> + <div id="blue" class="blueSquare"></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/order-of-images-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/order-of-images-ref.html new file mode 100644 index 0000000000..a704cd4f93 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/order-of-images-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + height: 100px; + position: relative; + width: 100px; + } + + div#outer-black + { + background-color: black; + left: 90px; + top: 90px; + } + + div#middle-orange + { + background-color: orange; + bottom: 30px; + right: 30px; + } + + div#inner-blue + { + background-color: blue; + bottom: 30px; + right: 30px; + } + </style> + + <p>Test passes if a blue box overlaps an orange box, which overlaps a black box. + + <div id="outer-black"> + + <div id="middle-orange"> + + <div id="inner-blue"></div> + + </div> + + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box-ref.html new file mode 100644 index 0000000000..1bf307b0d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + display: inline-block; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + div#multiple + { + background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); + bottom: 288px; + margin-top: 8px; + position: relative; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + bottom: 288px; + height: 256px; + position: relative; + width: 482px; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><div class="light-blue-border"></div><br> + +<div class="image" id="multiple"></div><div class="light-blue-border" style="bottom: 576px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_position-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_position-ref.html new file mode 100644 index 0000000000..f965bba210 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_position-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + display: inline-block; + position: relative; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + img + { + clip: rect(15px, auto, auto, 15px); + left: -15px; + position: absolute; + top: -15px; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + bottom: 288px; + height: 256px; + width: 482px; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><div class="light-blue-border"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_radius-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_radius-ref.html new file mode 100644 index 0000000000..d84aa37758 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_radius-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + border-radius: 60px; + display: inline-block; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + img + { + border-top-left-radius: 60px; + } + + div#multiple + { + background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); + bottom: 288px; + margin-top: 8px; + position: relative; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + bottom: 288px; + height: 256px; + position: relative; + width: 482px; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><div class="light-blue-border"></div><br> + +<div class="image" id="multiple"></div><div class="light-blue-border" style="bottom: 576px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_size-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_size-ref.html new file mode 100644 index 0000000000..99697422f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-border-box_with_size-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + display: inline-block; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + div#multiple + { + background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); + background-size: 257px auto; + bottom: 288px; + margin-top: 8px; + position: relative; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + bottom: 288px; + height: 256px; + width: 482px; + position: relative; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" width="257" alt="Image download support must be enabled"></div><div class="light-blue-border"></div> + +<div class="image" id="multiple"></div><div class="light-blue-border" style="bottom: 576px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box-ref.html new file mode 100644 index 0000000000..eac0310182 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + display: inline-block; + vertical-align: bottom; + } + + img + { + padding-left: 16px; + padding-top: 16px; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + height: 256px; + width: 482px; + } + </style> + + +<div class="light-blue-border"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><br> + +<div class="light-blue-border" style="background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); background-position: 16px 16px; margin-top: 8px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_position-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_position-ref.html new file mode 100644 index 0000000000..483e180bfa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_position-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + display: inline-block; + position: relative; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + img + { + left: 17px; + position: absolute; + top: 17px; + } + + div.light-blue-border + { + bottom: 288px; + border: 16px solid rgba(60, 150, 255, 0.4); + height: 256px; + width: 482px; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><div class="light-blue-border"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_radius-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_radius-ref.html new file mode 100644 index 0000000000..7c62fd3504 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_radius-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border-radius: 60px; + display: inline-block; + vertical-align: bottom; + } + + img + { + padding-left: 16px; + padding-top: 16px; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + height: 256px; + width: 482px; + } + </style> + +<div class="light-blue-border"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><br> + +<div class="light-blue-border" style="background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); background-position: 16px 16px; margin-top: 8px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_size-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_size-ref.html new file mode 100644 index 0000000000..cc429f661e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-content-box_with_size-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + display: inline-block; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + img + { + left: 32px; + position: relative; + top: 32px; + } + + div#multiple + { + background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); + background-position: 32px 32px; + background-size: 225px auto; + bottom: 288px; + margin-top: 8px; + position: relative; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + bottom: 288px; + height: 256px; + position: relative; + width: 482px; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" width="225" alt="Image download support must be enabled"></div><div class="light-blue-border"></div><br> + +<div class="image" id="multiple"></div><div class="light-blue-border" style="bottom: 576px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box-ref.html new file mode 100644 index 0000000000..d534ca9733 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + display: inline-block; + vertical-align: bottom; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + height: 256px; + width: 482px; + } + </style> + +<div class="light-blue-border"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><br> + +<div class="light-blue-border" style="background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); margin-top: 8px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_position-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_position-ref.html new file mode 100644 index 0000000000..6a96a9e379 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_position-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + display: inline-block; + position: relative; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + img + { + left: 1px; + position: absolute; + top: 1px; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + bottom: 288px; + height: 256px; + width: 482px; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" alt="Image download support must be enabled"></div><div class="light-blue-border"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_radius-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_radius-ref.html new file mode 100644 index 0000000000..e4c44254df --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_radius-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + display: inline-block; + vertical-align: bottom; + } + + div.light-blue-border + { + border-radius: 60px; + border: 16px solid rgba(60, 150, 255, 0.4); + height: 256px; + width: 482px; + } + </style> + +<div class="light-blue-border"><img src="../background-origin/support/yellow-orange-blue-160x160.png" style="position: relative; z-index: -1;" alt="Image download support must be enabled"></div><br> + +<div class="light-blue-border" style="background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); margin-top: 8px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_size-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_size-ref.html new file mode 100644 index 0000000000..d71bb83045 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/origin-padding-box_with_size-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + height: 568px; + overflow-y: hidden; + width: 584px; + } + + div + { + display: inline-block; + vertical-align: bottom; + } + + div.image + { + height: 288px; + width: 514px; + } + + img + { + left: 16px; + position: relative; + top: 16px; + } + + div#multiple + { + background-image: url('../background-origin/support/yellow-orange-blue-160x160.png'); + background-position: 16px 16px; + background-size: 241px auto; + bottom: 288px; + margin-top: 8px; + position: relative; + } + + div.light-blue-border + { + border: 16px solid rgba(60, 150, 255, 0.4); + bottom: 288px; + height: 256px; + position: relative; + width: 482px; + } + </style> + +<div class="image"><img src="../background-origin/support/yellow-orange-blue-160x160.png" width="241" alt="Image download support must be enabled"></div><div class="light-blue-border"></div><br> + +<div class="image" id="multiple"></div><div class="light-blue-border" style="bottom: 576px;"></div> 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..95db5aa78c --- /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/table-cell-background-local-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/table-cell-background-local-002-ref.html new file mode 100644 index 0000000000..3fbb9f848c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/table-cell-background-local-002-ref.html @@ -0,0 +1,21 @@ + <!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + height: 100px; + margin: 120px 0px 0px 104px; + width: 100px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/table-cell-background-local-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/table-cell-background-local-003-ref.html new file mode 100644 index 0000000000..6708df44ce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/table-cell-background-local-003-ref.html @@ -0,0 +1,32 @@ + <!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#outer + { + height: 100px; + margin: 120px 0px 0px 104px; + overflow: auto; + width: 100px; + } + + div#inner + { + background-color: green; + height: 300px; + width: 300px; + } + </style> + + <body onload="document.getElementById('outer').scrollTop = 200; document.getElementById('outer').scrollLeft = 200;"> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div id="outer"> + <div id="inner"></div> + </div> 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> diff --git a/testing/web-platform/tests/css/css-backgrounds/resources/blue-100.png b/testing/web-platform/tests/css/css-backgrounds/resources/blue-100.png Binary files differnew file mode 100644 index 0000000000..f578ae7253 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/resources/blue-100.png diff --git a/testing/web-platform/tests/css/css-backgrounds/resources/green-100.png b/testing/web-platform/tests/css/css-backgrounds/resources/green-100.png Binary files differnew file mode 100644 index 0000000000..e45bbbe5c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/resources/green-100.png diff --git a/testing/web-platform/tests/css/css-backgrounds/resources/green-bottom.png b/testing/web-platform/tests/css/css-backgrounds/resources/green-bottom.png Binary files differnew file mode 100644 index 0000000000..edd853b179 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/resources/green-bottom.png diff --git a/testing/web-platform/tests/css/css-backgrounds/resources/green-right.png b/testing/web-platform/tests/css/css-backgrounds/resources/green-right.png Binary files differnew file mode 100644 index 0000000000..a6eda0a121 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/resources/green-right.png diff --git a/testing/web-platform/tests/css/css-backgrounds/resources/green1x50.png b/testing/web-platform/tests/css/css-backgrounds/resources/green1x50.png Binary files differnew file mode 100644 index 0000000000..4540a11478 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/resources/green1x50.png diff --git a/testing/web-platform/tests/css/css-backgrounds/resources/green50x1.png b/testing/web-platform/tests/css/css-backgrounds/resources/green50x1.png Binary files differnew file mode 100644 index 0000000000..1e90474ceb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/resources/green50x1.png diff --git a/testing/web-platform/tests/css/css-backgrounds/resources/stripes-100.png b/testing/web-platform/tests/css/css-backgrounds/resources/stripes-100.png Binary files differnew file mode 100644 index 0000000000..cfb6980439 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/resources/stripes-100.png diff --git a/testing/web-platform/tests/css/css-backgrounds/scroll-positioned-multiple-background-images.html b/testing/web-platform/tests/css/css-backgrounds/scroll-positioned-multiple-background-images.html new file mode 100644 index 0000000000..a9ca550ce3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/scroll-positioned-multiple-background-images.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: Scroll multiple background images that are positioned</title> +<link rel="author" title="Google" href="http://www.google.com/" /> +<link rel="match" href="reference/60x60-green-background.html"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#layering"> +<meta name="flags" content="dom image scroll" /> +<meta name="assert" content="When multiple background images are positioned at (0px, 0px) and (0, 60px) of each 60px by 60px in a scrollable element, +and the element is scrolled to (0, 60px), only the second image is shown." /> +<style type="text/css"> + +#container { + width: 200px; + height: 200px; + overflow: hidden; +} + +#element-with-attachment-scroll { + width: 500px; + height: 500px; + background-image: url('/css/support/60x60-red.png'), url('support/60x60-green.png'); + background-position: 0 0, 0 60px; + background-repeat: no-repeat; +} + +</style> +</head> +<body> +<div id="container"><div id="element-with-attachment-scroll"><br></div></div> +<script> +document.getElementById('container').scrollTop = 60; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/subpixel-repeat-no-repeat-mix.html b/testing/web-platform/tests/css/css-backgrounds/subpixel-repeat-no-repeat-mix.html new file mode 100644 index 0000000000..1828b97487 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/subpixel-repeat-no-repeat-mix.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: Mixing background-repeat: repeat and no-repeat, subpixel sizes</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> + <link rel="match" href="reference/subpixel-repeat-no-repeat-mix-ref.html"> + <style> + div.x { + position: absolute; + left: 20px; + top: 10px; + width: 116.8px; + height: 10px; + background-image: url("resources/green-right.png"); + background-position-x: right; + background-repeat: repeat-y; + background-size: 116.8px 0.8px; + } + div.y { + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 116.8px; + background-image: url("resources/green-bottom.png"); + background-position-y: bottom; + background-repeat: repeat-x; + background-size: 0.8px 116.8px; + } + </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/support/100x100-blue-and-orange.png b/testing/web-platform/tests/css/css-backgrounds/support/100x100-blue-and-orange.png Binary files differnew file mode 100644 index 0000000000..70437d7bda --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/100x100-blue-and-orange.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/100x100-gr-rr.png b/testing/web-platform/tests/css/css-backgrounds/support/100x100-gr-rr.png Binary files differnew file mode 100644 index 0000000000..dfd0593e3c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/100x100-gr-rr.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/100x100-green-with-red-corners.png b/testing/web-platform/tests/css/css-backgrounds/support/100x100-green-with-red-corners.png Binary files differnew file mode 100644 index 0000000000..a193937c0d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/100x100-green-with-red-corners.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/100x100-red.png b/testing/web-platform/tests/css/css-backgrounds/support/100x100-red.png Binary files differnew file mode 100644 index 0000000000..57bf3ddc52 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/100x100-red.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/12x12-green.png b/testing/web-platform/tests/css/css-backgrounds/support/12x12-green.png Binary files differnew file mode 100644 index 0000000000..1b92848448 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/12x12-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/1pxgreen-98pxred.png b/testing/web-platform/tests/css/css-backgrounds/support/1pxgreen-98pxred.png Binary files differnew file mode 100644 index 0000000000..0f8571a945 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/1pxgreen-98pxred.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/1x1-green.png b/testing/web-platform/tests/css/css-backgrounds/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/1x1-lime.png b/testing/web-platform/tests/css/css-backgrounds/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/1x1-maroon.png b/testing/web-platform/tests/css/css-backgrounds/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/1x1-navy.png b/testing/web-platform/tests/css/css-backgrounds/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/1x1-red.png b/testing/web-platform/tests/css/css-backgrounds/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/1x1-white.png b/testing/web-platform/tests/css/css-backgrounds/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/1x1-white.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/40px-wide-20px-tall-green-rect.png b/testing/web-platform/tests/css/css-backgrounds/support/40px-wide-20px-tall-green-rect.png Binary files differnew file mode 100644 index 0000000000..c372de1dbd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/40px-wide-20px-tall-green-rect.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/4bicolor-squares.png b/testing/web-platform/tests/css/css-backgrounds/support/4bicolor-squares.png Binary files differnew file mode 100644 index 0000000000..252710dc44 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/4bicolor-squares.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/500x500-red-with-green-center.png b/testing/web-platform/tests/css/css-backgrounds/support/500x500-red-with-green-center.png Binary files differnew file mode 100644 index 0000000000..263102bf8a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/500x500-red-with-green-center.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/500x500-white-red-green-irreg-polygon.png b/testing/web-platform/tests/css/css-backgrounds/support/500x500-white-red-green-irreg-polygon.png Binary files differnew file mode 100644 index 0000000000..99ff636c3f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/500x500-white-red-green-irreg-polygon.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/50x50-green.png b/testing/web-platform/tests/css/css-backgrounds/support/50x50-green.png Binary files differnew file mode 100644 index 0000000000..6c1406b7df --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/50x50-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-backgrounds/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/60x60-green.png b/testing/web-platform/tests/css/css-backgrounds/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/60x60-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas-40-30-20-10.png b/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas-40-30-20-10.png Binary files differnew file mode 100644 index 0000000000..3f640c7604 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas-40-30-20-10.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas-40-30-20-10.svg b/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas-40-30-20-10.svg new file mode 100644 index 0000000000..c5896a9255 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas-40-30-20-10.svg @@ -0,0 +1,32 @@ + +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + + <!-- + + Author: Gérard Talbot + + Created: August 9th 2023 + + Last modified: October 5th 2023 + + --> + + <rect x="0" y="0" width="10" height="40" fill="yellow" /> + + <rect x="10" y="0" width="60" height="40" fill="blue" /> + + <rect x="70" y="0" width="30" height="40" fill="aqua" /> + + <rect x="0" y="40" width="10" height="40" fill="orange" /> + + <rect x="10" y="40" width="60" height="40" fill="red" /> + + <rect x="70" y="40" width="30" height="40" fill="teal" /> + + <rect x="0" y="80" width="10" height="20" fill="fuchsia" /> + + <rect x="10" y="80" width="60" height="20" fill="purple" /> + + <rect x="70" y="80" width="30" height="20" fill="black" /> + +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas.png b/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas.png Binary files differnew file mode 100644 index 0000000000..93f5661947 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/9-colored-areas.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/9grid20-40-red.png b/testing/web-platform/tests/css/css-backgrounds/support/9grid20-40-red.png Binary files differnew file mode 100644 index 0000000000..75173b7edc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/9grid20-40-red.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-green.png b/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-green.png Binary files differnew file mode 100644 index 0000000000..329699bf9d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-red-old.png b/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-red-old.png Binary files differnew file mode 100644 index 0000000000..975b8095f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-red-old.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-red.png b/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-red.png Binary files differnew file mode 100644 index 0000000000..356bf82e4a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/9grid40-30-20-10-red.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/a-green.css b/testing/web-platform/tests/css/css-backgrounds/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/css-backgrounds/support/aqua-yellow-32x32.png b/testing/web-platform/tests/css/css-backgrounds/support/aqua-yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..42f8a2100b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/aqua-yellow-32x32.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/aqua-yellow-37x37.png b/testing/web-platform/tests/css/css-backgrounds/support/aqua-yellow-37x37.png Binary files differnew file mode 100644 index 0000000000..0289b03941 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/aqua-yellow-37x37.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/aqua_color.png b/testing/web-platform/tests/css/css-backgrounds/support/aqua_color.png Binary files differnew file mode 100644 index 0000000000..0a26c7d00d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/aqua_color.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/b-green.css b/testing/web-platform/tests/css/css-backgrounds/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/support/bg.jpg b/testing/web-platform/tests/css/css-backgrounds/support/bg.jpg Binary files differnew file mode 100644 index 0000000000..4418129813 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/bg.jpg diff --git a/testing/web-platform/tests/css/css-backgrounds/support/bg_flower.gif b/testing/web-platform/tests/css/css-backgrounds/support/bg_flower.gif Binary files differnew file mode 100644 index 0000000000..506cea3df4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/bg_flower.gif diff --git a/testing/web-platform/tests/css/css-backgrounds/support/black96x96.png b/testing/web-platform/tests/css/css-backgrounds/support/black96x96.png Binary files differnew file mode 100644 index 0000000000..4e5a7c7546 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/black96x96.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/black_color.png b/testing/web-platform/tests/css/css-backgrounds/support/black_color.png Binary files differnew file mode 100644 index 0000000000..ddd4e75698 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/black_color.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/blue-and-red-diamonds-81x81.png b/testing/web-platform/tests/css/css-backgrounds/support/blue-and-red-diamonds-81x81.png Binary files differnew file mode 100644 index 0000000000..5b2f7e156c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/blue-and-red-diamonds-81x81.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/blue-diamond-27x27.png b/testing/web-platform/tests/css/css-backgrounds/support/blue-diamond-27x27.png Binary files differnew file mode 100644 index 0000000000..1e66726482 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/blue-diamond-27x27.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/blue-diamond.png b/testing/web-platform/tests/css/css-backgrounds/support/blue-diamond.png Binary files differnew file mode 100644 index 0000000000..3617045efb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/blue-diamond.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/blue96x96.png b/testing/web-platform/tests/css/css-backgrounds/support/blue96x96.png Binary files differnew file mode 100644 index 0000000000..820f8cace2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/blue96x96.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/blue_color.png b/testing/web-platform/tests/css/css-backgrounds/support/blue_color.png Binary files differnew file mode 100644 index 0000000000..d8bd022f08 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/blue_color.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/border-image-repeat-space-011.png b/testing/web-platform/tests/css/css-backgrounds/support/border-image-repeat-space-011.png Binary files differnew file mode 100644 index 0000000000..70b80a3199 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/border-image-repeat-space-011.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/border-image.jpg b/testing/web-platform/tests/css/css-backgrounds/support/border-image.jpg Binary files differnew file mode 100644 index 0000000000..a83a921fdf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/border-image.jpg diff --git a/testing/web-platform/tests/css/css-backgrounds/support/border.png b/testing/web-platform/tests/css/css-backgrounds/support/border.png Binary files differnew file mode 100644 index 0000000000..7a657391d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/border.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/c-red.css b/testing/web-platform/tests/css/css-backgrounds/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/support/cat.png b/testing/web-platform/tests/css/css-backgrounds/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/cat.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/css3.png b/testing/web-platform/tests/css/css-backgrounds/support/css3.png Binary files differnew file mode 100644 index 0000000000..823b16a16c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/css3.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green-1000x10.png b/testing/web-platform/tests/css/css-backgrounds/support/green-1000x10.png Binary files differnew file mode 100644 index 0000000000..8ce354cfb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green-1000x10.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green-10x1000.png b/testing/web-platform/tests/css/css-backgrounds/support/green-10x1000.png Binary files differnew file mode 100644 index 0000000000..c7fd6eee5c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green-10x1000.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green-150-150.png b/testing/web-platform/tests/css/css-backgrounds/support/green-150-150.png Binary files differnew file mode 100644 index 0000000000..6601b79ace --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green-150-150.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green-60-60.png b/testing/web-platform/tests/css/css-backgrounds/support/green-60-60.png Binary files differnew file mode 100644 index 0000000000..b061c1f33f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green-60-60.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green-60x60-red-5px-border.png b/testing/web-platform/tests/css/css-backgrounds/support/green-60x60-red-5px-border.png Binary files differnew file mode 100644 index 0000000000..97a94592dd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green-60x60-red-5px-border.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green-dot.png b/testing/web-platform/tests/css/css-backgrounds/support/green-dot.png Binary files differnew file mode 100644 index 0000000000..034353e234 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green-dot.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green.png b/testing/web-platform/tests/css/css-backgrounds/support/green.png Binary files differnew file mode 100644 index 0000000000..5c5217b1e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/green_color.png b/testing/web-platform/tests/css/css-backgrounds/support/green_color.png Binary files differnew file mode 100644 index 0000000000..2ab26cd8c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/green_color.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/img-ref-1.png b/testing/web-platform/tests/css/css-backgrounds/support/img-ref-1.png Binary files differnew file mode 100644 index 0000000000..985e10e30f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/img-ref-1.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/img-ref-2.png b/testing/web-platform/tests/css/css-backgrounds/support/img-ref-2.png Binary files differnew file mode 100644 index 0000000000..ac66bdf734 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/img-ref-2.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/import-green.css b/testing/web-platform/tests/css/css-backgrounds/support/import-green.css new file mode 100644 index 0000000000..537104e663 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/testing/web-platform/tests/css/css-backgrounds/support/import-red.css b/testing/web-platform/tests/css/css-backgrounds/support/import-red.css new file mode 100644 index 0000000000..9945ef4711 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/testing/web-platform/tests/css/css-backgrounds/support/new-red-diamond-27x27.png b/testing/web-platform/tests/css/css-backgrounds/support/new-red-diamond-27x27.png Binary files differnew file mode 100644 index 0000000000..859cbc33d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/new-red-diamond-27x27.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/orange-intrinsic-none.svg b/testing/web-platform/tests/css/css-backgrounds/support/orange-intrinsic-none.svg new file mode 100644 index 0000000000..d63fb9ef70 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/orange-intrinsic-none.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none"> + <rect width="100%" height="100%" fill="orange" stroke="blue" stroke-width="32" /> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/support/orange_color.png b/testing/web-platform/tests/css/css-backgrounds/support/orange_color.png Binary files differnew file mode 100644 index 0000000000..329491802f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/orange_color.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/outline-5px-10px-15px-20px-green.png b/testing/web-platform/tests/css/css-backgrounds/support/outline-5px-10px-15px-20px-green.png Binary files differnew file mode 100644 index 0000000000..2ca46e53f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/outline-5px-10px-15px-20px-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-gr-rr-200x200.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-gr-rr-200x200.png Binary files differnew file mode 100644 index 0000000000..5fe3651bd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-gr-rr-200x200.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..6fcfeb4883 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-rg-rr-200x200.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rg-rr-200x200.png Binary files differnew file mode 100644 index 0000000000..2474cc0f5a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rg-rr-200x200.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..db8ed5cf7b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-rr-gr-200x200.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rr-gr-200x200.png Binary files differnew file mode 100644 index 0000000000..599fbd3028 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rr-gr-200x200.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-rr-rg-200x200.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rr-rg-200x200.png Binary files differnew file mode 100644 index 0000000000..1333efafd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-rr-rg-200x200.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/pattern-tr.png b/testing/web-platform/tests/css/css-backgrounds/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/red-diamond.png b/testing/web-platform/tests/css/css-backgrounds/support/red-diamond.png Binary files differnew file mode 100644 index 0000000000..30911f02cb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/red-diamond.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/red.png b/testing/web-platform/tests/css/css-backgrounds/support/red.png Binary files differnew file mode 100644 index 0000000000..0d67afdd30 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/red.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/red_color.png b/testing/web-platform/tests/css/css-backgrounds/support/red_color.png Binary files differnew file mode 100644 index 0000000000..24948d0d0e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/red_color.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-bl.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-bl.png Binary files differnew file mode 100644 index 0000000000..6abbaf319f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-bl.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-bo.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-bo.png Binary files differnew file mode 100644 index 0000000000..f72a67381c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-bo.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-br.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-br.png Binary files differnew file mode 100644 index 0000000000..84e22afe2a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-br.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-ct.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-ct.png Binary files differnew file mode 100644 index 0000000000..71ac10f611 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-ct.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-le.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-le.png Binary files differnew file mode 100644 index 0000000000..abe56ffad6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-le.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-ri.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-ri.png Binary files differnew file mode 100644 index 0000000000..95d7db8423 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-ri.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-tl.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-tl.png Binary files differnew file mode 100644 index 0000000000..8a3516998a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-tl.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-to.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-to.png Binary files differnew file mode 100644 index 0000000000..d1b082c9ba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-to.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule-tr.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule-tr.png Binary files differnew file mode 100644 index 0000000000..cd9bb5a5a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule-tr.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/reticule.png b/testing/web-platform/tests/css/css-backgrounds/support/reticule.png Binary files differnew file mode 100644 index 0000000000..02c7d10e76 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/reticule.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/ruler-h-50%.png b/testing/web-platform/tests/css/css-backgrounds/support/ruler-h-50%.png Binary files differnew file mode 100644 index 0000000000..cf2eea6b43 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/ruler-h-50%.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/ruler-h-50px.png b/testing/web-platform/tests/css/css-backgrounds/support/ruler-h-50px.png Binary files differnew file mode 100644 index 0000000000..9f46583665 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/ruler-h-50px.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/ruler-v-100px.png b/testing/web-platform/tests/css/css-backgrounds/support/ruler-v-100px.png Binary files differnew file mode 100644 index 0000000000..a837eca222 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/ruler-v-100px.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/ruler-v-50px.png b/testing/web-platform/tests/css/css-backgrounds/support/ruler-v-50px.png Binary files differnew file mode 100644 index 0000000000..8414102802 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/ruler-v-50px.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/square-purple.png b/testing/web-platform/tests/css/css-backgrounds/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/square-purple.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/square-teal.png b/testing/web-platform/tests/css/css-backgrounds/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/square-teal.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/square-white.png b/testing/web-platform/tests/css/css-backgrounds/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/square-white.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/swatch-blue.png b/testing/web-platform/tests/css/css-backgrounds/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/swatch-green.png b/testing/web-platform/tests/css/css-backgrounds/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/swatch-lime.png b/testing/web-platform/tests/css/css-backgrounds/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/swatch-orange.png b/testing/web-platform/tests/css/css-backgrounds/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/swatch-red.png b/testing/web-platform/tests/css/css-backgrounds/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/swatch-white.png b/testing/web-platform/tests/css/css-backgrounds/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/swatch-white.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/swatch-yellow.png b/testing/web-platform/tests/css/css-backgrounds/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/table-head.jpg b/testing/web-platform/tests/css/css-backgrounds/support/table-head.jpg Binary files differnew file mode 100644 index 0000000000..d5884136e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/table-head.jpg diff --git a/testing/web-platform/tests/css/css-backgrounds/support/test-bl.png b/testing/web-platform/tests/css/css-backgrounds/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/test-bl.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/test-br.png b/testing/web-platform/tests/css/css-backgrounds/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/test-br.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/test-inner-half-size.png b/testing/web-platform/tests/css/css-backgrounds/support/test-inner-half-size.png Binary files differnew file mode 100644 index 0000000000..e473bf80ef --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/test-inner-half-size.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/test-outer.png b/testing/web-platform/tests/css/css-backgrounds/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/test-outer.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/test-tl.png b/testing/web-platform/tests/css/css-backgrounds/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/test-tl.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/test-tr.png b/testing/web-platform/tests/css/css-backgrounds/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/test-tr.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/white_color.png b/testing/web-platform/tests/css/css-backgrounds/support/white_color.png Binary files differnew file mode 100644 index 0000000000..4276253883 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/white_color.png diff --git a/testing/web-platform/tests/css/css-backgrounds/support/y.png b/testing/web-platform/tests/css/css-backgrounds/support/y.png Binary files differnew file mode 100644 index 0000000000..4e402fe2ee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/support/y.png diff --git a/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-002.html b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-002.html new file mode 100644 index 0000000000..5398ce8eff --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-002.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: table cell background-image with local attachment</title> + + <!-- + + Created: December 8th 2023 + + Last modified: December 8th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> + <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-control"> + <link rel="match" href="reference/table-cell-background-local-002-ref.html"> + + <style> + td + { + height: 100px; + padding: 0px; + vertical-align: top; + width: 100px; + } + + td#middle-cell + { + background: url("support/500x500-red-with-green-center.png") local; + overflow: hidden; + } + + div#outer + { + height: 0px; + width: 0px; + } + + div#inner + { + height: 300px; + width: 300px; + } + </style> + + <body onload="document.getElementById('middle-cell').scrollTop = 200; document.getElementById('middle-cell').scrollLeft = 200;"> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <table> + + <tr><td><td><td> + + <tr> + <td> + <td id="middle-cell"> + <div id="outer"> + <div id="inner"></div> + </div> + <td> + + <tr><td><td><td> + + </table> diff --git a/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-003.html b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-003.html new file mode 100644 index 0000000000..e2662bec1f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-003.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Backgrounds and Borders Test: table cell background-image with local attachment</title> + + <!-- + + Created: December 8th 2023 + + Last modified: December 8th 2023 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> + <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-control"> + <link rel="match" href="reference/table-cell-background-local-003-ref.html"> + + <style> + td + { + height: 100px; + padding: 0px; + vertical-align: top; + width: 100px; + } + + td#middle-cell + { + background: url("support/500x500-red-with-green-center.png") local; + overflow: auto; + } + + div#outer + { + height: 0px; + width: 0px; + } + + div#inner + { + height: 300px; + width: 300px; + } + </style> + + <body onload="document.getElementById('middle-cell').scrollTop = 200; document.getElementById('middle-cell').scrollLeft = 200;"> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <table> + + <tr><td><td><td> + + <tr> + <td> + <td id="middle-cell"> + <div id="outer"> + <div id="inner"></div> + </div> + <td> + + <tr><td><td><td> + + </table> diff --git a/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-ref.html b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-ref.html new file mode 100644 index 0000000000..b6088dd39a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +Passes if there is a brown square. +<div id="target" + style="overflow: hidden; width: 100px; height: 100px; + background: linear-gradient(to bottom right, green, red); + background-attachment: local"> + <div style="width: 3000px; height: 3000px"></div> +</div> +<script> +target.scrollTop = 1500; +target.scrollLeft = 1500; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local.html b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local.html new file mode 100644 index 0000000000..e52aa26ef2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/table-cell-background-local.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Tests rendering of table cell's background-image with local attachment.</title> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#ref-for-valdef-background-attachment-local"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-hidden"> +<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#block-formatting"> +<link rel="match" href="table-cell-background-local-ref.html"> +<meta name="assert" content="The local attachment background image of a table cell with overflow:hidden should be positioned in the scrolling area and clipped"> +Passes if there is a brown square. +<table style="border-spacing: 0"> + <tr> + <td id="target" + style="overflow: hidden; padding: 0; + background: linear-gradient(to bottom right, green, red); + background-attachment: local"> + <div style="width: 100px; height: 100px"> + <div style="width: 3000px; height: 3000px"></div> + </div> + </div> + </tr> +</table> +<script> +target.scrollTop = 1500; +target.scrollLeft = 1500; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/tiny-foreignObject-double-border-radius-crash.html b/testing/web-platform/tests/css/css-backgrounds/tiny-foreignObject-double-border-radius-crash.html new file mode 100644 index 0000000000..9d89640465 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/tiny-foreignObject-double-border-radius-crash.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1406734"> +<svg> +<foreignObject style="width: 1px; height: 1px; border-left: 3px double black; border-radius: 1px"/> +</svg> diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-bottom.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-bottom.htm new file mode 100644 index 0000000000..b7bccd77af --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-bottom.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_color_shorthand_missing_bottom</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-color" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-color: yellow black; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, left border is black, <strong>bottom border is yellow</strong>, right border is black, top border is yellow.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-left.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-left.htm new file mode 100644 index 0000000000..12b7c7f3df --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-left.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_color_shorthand_missing_left</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-color" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-color: yellow black blue; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, <strong>left border is black</strong>, bottom border is blue, right border is black, top border is yellow.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-right.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-right.htm new file mode 100644 index 0000000000..eca12df8bb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand-missing-right.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_color_shorthand_missing_right</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-color" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-color: yellow; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, left border is yellow, bottom border is yellow, <strong>right border is yellow</strong>, top border is yellow.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand.htm new file mode 100644 index 0000000000..6adb177808 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color-shorthand.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_color_shorthand</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-color" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-color: yellow black blue green; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, left border is green, bottom border is blue, right border is black, top border is yellow.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color.htm new file mode 100644 index 0000000000..6a3cb5dce5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-color.htm @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_color</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-color" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-top-color: yellow; + border-right-color: black; + border-bottom-color: blue; + border-left-color: green; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, left border is green, bottom border is blue, right border is black, top border is yellow.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-double.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-double.htm new file mode 100644 index 0000000000..c5bc32781e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-double.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_style_double</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. 'double': Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal 'border-width'.)" /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-style: double; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, border style is double, and the sum of the lines and the space must equal 5.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand-missing-bottom.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand-missing-bottom.htm new file mode 100644 index 0000000000..f53f92a859 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand-missing-bottom.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_style</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-style: solid dotted; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, left border style is dotted, <strong>bottom border style is solid</strong>, right border style is dotted, top border style is solid.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand-missing-left.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand-missing-left.htm new file mode 100644 index 0000000000..8c17fa9980 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand-missing-left.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_style</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-style: solid dotted dashed; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, <strong>left border style is dotted</strong>, bottom border style is dashed, right border style is dotted, top border style is solid.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand.htm new file mode 100644 index 0000000000..ae52c45f47 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-shorthand.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_style_shorthand</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-style: solid dotted dashed double; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, left border style is double, bottom border style is dashed, right border style is dotted, top border style is solid.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-values.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-values.htm new file mode 100644 index 0000000000..c162e15a16 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style-values.htm @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_style_values</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="assert" content="'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. <border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset" /> + <style> + #test { + width: 100%; + height: 100%; + } + #test div { + float: left; + height: 100px; + width: 100px; + margin: 25px; + display: block; + position: relative; + border-width: 5px; + background: blue; + } + #none { + border-style: none; + } + #hidden { + border-style: hidden; + } + #dotted { + border-style: dotted; + } + #dashed { + border-style: dashed; + } + #solid { + border-style: solid; + } + #double { + border-style: double; + } + #groove { + border-style: groove; + } + #ridge { + border-style: ridge; + } + #inset { + border-style: inset; + } + #outset { + border-style: outset; + } + </style> + </head> + <body> + <p>Test passes if there are green squares with border style from left to right: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset.</p> + <div id="test"> + <div id="none">none</div> + <div id="hidden">hidden</div> + <div id="dotted">dotted</div> + <div id="dashed">dashed</div> + <div id="solid">solid</div> + <div id="double">double</div> + <div id="groove">groove</div> + <div id="ridge">ridge</div> + <div id="inset">inset</div> + <div id="outset">outset</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style.htm b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style.htm new file mode 100644 index 0000000000..357cde73e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-css3background-border-style.htm @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Backgrounds and Borders Test: border_style</title> + <link rel="author" title="disound" href="mailto:disound@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> + <meta name="flags" content="image" /> + <meta name="assert" content="'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top." /> + <style> + #ref { + background-color: white; + height: 160px; + width: 160px; + } + #test { + border: black solid 5px; + border-top-style: solid; + border-right-style: dotted; + border-bottom-style: dashed; + border-left-style: double; + bottom: 160px; + height: 100px; + padding: 25px; + position: relative; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a white square, left border style is double, bottom border style is dashed, right border style is dotted, top border style is solid.</p> + <div id="ref"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/ttwf-reftest-borderRadius.html b/testing/web-platform/tests/css/css-backgrounds/ttwf-reftest-borderRadius.html new file mode 100644 index 0000000000..6950d17f27 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/ttwf-reftest-borderRadius.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>Test Background and border</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"> + <link rel="match" href="reference/ttwf-reftest-borderRadius-ref.html"> + <meta name="assert" content="Table with 'border-collapse: collapse;' declaration, it's 'border-radius' style will not work."> + <style type="text/css"> + #testCon{border: 4px solid green; border-radius: 5px; border-collapse: collapse;} + #testCon td{width: 60px; height: 60px; border: 4px solid green; border-radius: 10px;} + </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> |
