diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-borders | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-borders')
12 files changed, 494 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-borders/border-image-width-interpolation-math-functions-tentative.html b/testing/web-platform/tests/css/css-borders/border-image-width-interpolation-math-functions-tentative.html new file mode 100644 index 0000000000..70539beb26 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/border-image-width-interpolation-math-functions-tentative.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>border-image-width interpolation with css math functions</title> + <link rel="author" title="Daniil Sakhapov" href="mailto:sakhapov@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#the-border-image-width"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + :root { + font-size: 10px; + } + </style> + <body> + <script> + test_interpolation({ + property: 'border-image-width', + from: '100', + to: 'calc(sign(20rem - 20px) * 180)', + }, [ + {at: -1, expect: '20'}, + {at: 0, expect: '100'}, + {at: 0.125, expect: '110'}, + {at: 0.875, expect: '170'}, + {at: 1, expect: '180'}, + {at: 2, expect: '260'} + ]); + + test_interpolation({ + property: 'border-image-width', + from: 'calc(sign(20rem - 20px) * 100)', + to: 'calc(progress(10rem from 20px to 100px) * 180)', + }, [ + {at: -1, expect: '20'}, + {at: 0, expect: '100'}, + {at: 0.125, expect: '110'}, + {at: 0.875, expect: '170'}, + {at: 1, expect: '180'}, + {at: 2, expect: '260'} + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-borders/border-radius-greater-than-width.html b/testing/web-platform/tests/css/css-borders/border-radius-greater-than-width.html new file mode 100644 index 0000000000..8c421a213b --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/border-radius-greater-than-width.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<head> + <title>CSS Test: Property of 'border-[*]-radius'.</title> + <link rel="author" title="Lin Peng" href="mailto:penglin220@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <link rel="match" href="reference/border-radius-greater-than-width-ref.html"> + <meta name="assert" content="Border should also render normally when 'border-[*]-radius' are greater than width or height." /> + <style type="text/css"> + div + { + width: 9px; + height: 100px; + border-top: 100px solid lightgreen; + border-left: 100px solid black; + border-top-right-radius: 10px; + border-bottom-left-radius: 10px; + } + </style> +</head> +<body> + <div></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-borders/border-width-rounding.tentative.html b/testing/web-platform/tests/css/css-borders/border-width-rounding.tentative.html new file mode 100644 index 0000000000..04c4ddf40b --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/border-width-rounding.tentative.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Border: width rounding + </title> + + <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-width"> + + <meta name="assert" content="border-width computed value after rounding."> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> + <h1> + Test passes if border widths are rounded up + when they are greater than 0 and less than 1, + and rounded down when they are greater than 1. + </h1> + + <script> + const values = [ + { input: "0px", expected: "0px" }, + { input: "0.1px", expected: "1px" }, + { input: "0.25px", expected: "1px" }, + { input: "0.5px", expected: "1px" }, + { input: "0.9px", expected: "1px" }, + { input: "1px", expected: "1px" }, + { input: "1.25px", expected: "1px" }, + { input: "1.5px", expected: "1px" }, + { input: "2px", expected: "2px" }, + { input: "2.75px", expected: "2px" }, + { input: "2.999px", expected: "2px" }, + ]; + + for (const value of values) { + const div = document.createElement("div"); + div.style = `border: solid ${value.input} blue; margin-bottom: 20px;`; + document.body.appendChild(div); + } + + test(function() { + var targets = document.querySelectorAll("div"); + + for (var i=0; i < targets.length; ++i) { + assert_equals(getComputedStyle(targets[i]).borderWidth, values[i].expected); + } + }, "Test that border widths are rounded up when they are greater than 0px but less than 1px, and rounded down when they are greater than 1px."); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-borders/borders-on-sub-unit-sized-elements.html b/testing/web-platform/tests/css/css-borders/borders-on-sub-unit-sized-elements.html new file mode 100644 index 0000000000..1aff3c9a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/borders-on-sub-unit-sized-elements.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<title>CSS Borders: Borders appear when the element is smaller than 1/2 a pixel</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/borders-on-sub-unit-sized-elements-ref.html"> +<meta name="assert" content="Borders on elements smaller than one pixel in size + should still appear." /> +<head> +<style> + #right { + position: absolute; + top: 10px; + left: 65px; + width: 0.25px; + height: 50px; + border-right: 1px dashed black; + } + #left { + position: absolute; + top: 10px; + left: 5px; + width: 0.25px; + height: 50px; + border-left: 1px dashed black; + } + #top { + position: absolute; + top: 5px; + left: 10px; + width: 50px; + height: 0.25px; + border-top: 1px dashed black; + } + #bottom { + position: absolute; + top: 65px; + left: 10px; + width: 50px; + height: 0.25px; + border-bottom: 1px dashed black; + } +</style> +</head> +<body> +<div id="top"></div> +<div id="right"></div> +<div id="bottom"></div> +<div id="left"></div> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-borders/reference/border-radius-greater-than-width-ref.html b/testing/web-platform/tests/css/css-borders/reference/border-radius-greater-than-width-ref.html new file mode 100644 index 0000000000..3c8c470ef5 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/reference/border-radius-greater-than-width-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="Lin Peng" href="mailto:penglin220@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius"> +<head> + <style> + .div1 + { + width: 109px; + height: 100px; + background: lightgreen; + border-top-right-radius: 10px; + clip-path: polygon(0 0, 109px 0px, 109px 100px, 100px 100px); + } + .div2 + { + position: relative; + top: -100px; + width: 109px; + height: 200px; + background: black; + border-bottom-left-radius: 10px; + clip-path: polygon(0 0, 0px 200px, 100px 200px, 100px 100px); + } + </style> +</head> +<body> + <div class="div1"></div> + <div class="div2"></div> +</body> diff --git a/testing/web-platform/tests/css/css-borders/reference/borders-on-sub-unit-sized-elements-ref.html b/testing/web-platform/tests/css/css-borders/reference/borders-on-sub-unit-sized-elements-ref.html new file mode 100644 index 0000000000..19233778ed --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/reference/borders-on-sub-unit-sized-elements-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<title>CSS Borders: Borders appear when the element is smaller than 1/2 a pixel, reference</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<head> +<style> + #right { + position: absolute; + top: 10px; + left: 65px; + width: 0px; + height: 50px; + border-right: 1px dashed black; + } + #left { + position: absolute; + top: 10px; + left: 5px; + width: 0px; + height: 50px; + border-left: 1px dashed black; + } + #top { + position: absolute; + top: 5px; + left: 10px; + width: 50px; + height: 0px; + border-top: 1px dashed black; + } + #bottom { + position: absolute; + top: 65px; + left: 10px; + width: 50px; + height: 0px; + border-bottom: 1px dashed black; + } +</style> +</head> +<body> +<div id="top"></div> +<div id="right"></div> +<div id="bottom"></div> +<div id="left"></div> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-borders/reference/subpixel-border-width-ref.tentative.html b/testing/web-platform/tests/css/css-borders/reference/subpixel-border-width-ref.tentative.html new file mode 100644 index 0000000000..3ba8ac5754 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/reference/subpixel-border-width-ref.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Border: width computed value + </title> + + <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> + + <style> + .square { + height: 20px; + width: 20px; + border: 1px solid gray; + } + </style> +</head> + +<body> + <h1> + Test passes if border widths are rounded up + when they are greater than 0 and less than 1, + and rounded down when they are greater than 1. + </h1> + + <div class="square"></div> + <br> + <div class="square"></div> + <br> + <div class="square"></div> + <br> + <div class="square"></div> + <br> + <div class="square"></div> + <br> + <div class="square"></div> + <br> + <div class="square" style="border-width: 3px;"></div> + <br> + <div class="square" style="border-width: 3px;"></div> + <br> + <div class="square" style="border-width: 3px;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-borders/reference/subpixel-borders-with-child-border-box-sizing-ref.html b/testing/web-platform/tests/css/css-borders/reference/subpixel-borders-with-child-border-box-sizing-ref.html new file mode 100644 index 0000000000..b2311d5ba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/reference/subpixel-borders-with-child-border-box-sizing-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<head> + <style> + .outer { + border: solid 1px black; + background: red; + width: 101px; + height: 101px; + margin: 5px; + padding: 0px; + box-sizing: border-box; + } + .inner { + background: lightgreen; + box-sizing: border-box; + padding: 0px; + } + #inner1 { + width: 99px; + height: 99px; + } + #inner2 { + width: 100%; + height: 100%; + } + </style> +</head> +<body> + <div class="outer"> + <div class="inner" id="inner1"></div> + </div> + + <div class="outer"> + <div class="inner" id="inner2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-borders/reference/subpixel-borders-with-child-ref.html b/testing/web-platform/tests/css/css-borders/reference/subpixel-borders-with-child-ref.html new file mode 100644 index 0000000000..b8ce0e8348 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/reference/subpixel-borders-with-child-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<head> + <style> + .outer { + border: solid 1px black; + background: red; + width: 100px; + height: 100px; + margin: 5px; + } + .inner { + background: lightgreen + } + #inner1 { + width: 100px; + height: 100px; + } + #inner2 { + width: 100%; + height: 100%; + } + </style> +</head> +<body> + <div class="outer"> + <div class="inner" id="inner1"></div> + </div> + + <div class="outer"> + <div class="inner" id="inner2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-borders/subpixel-border-width.tentative.html b/testing/web-platform/tests/css/css-borders/subpixel-border-width.tentative.html new file mode 100644 index 0000000000..d056c01c91 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/subpixel-border-width.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Border: width computed value + </title> + + <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-width"> + <link rel="match" href="reference/subpixel-border-width-ref.tentative.html"> + + <meta name="assert" content="border-width computed value after rounding."> + + <style> + .square { + height: 20px; + width: 20px; + border: solid gray; + } + </style> +</head> + +<body> + <h1> + Test passes if border widths are rounded up + when they are greater than 0 and less than 1, + and rounded down when they are greater than 1. + </h1> + + <div class="square" style="border-width: 0.3px;"></div> + <br> + <div class="square" style="border-width: 0.5px;"></div> + <br> + <div class="square" style="border-width: 0.9px;"></div> + <br> + <div class="square" style="border-width: 1.3px;"></div> + <br> + <div class="square" style="border-width: 1.5px;"></div> + <br> + <div class="square" style="border-width: 1.9px;"></div> + <br> + <div class="square" style="border-width: 3.3px;"></div> + <br> + <div class="square" style="border-width: 3.5px;"></div> + <br> + <div class="square" style="border-width: 3.9px;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-borders/subpixel-borders-with-child-border-box-sizing.html b/testing/web-platform/tests/css/css-borders/subpixel-borders-with-child-border-box-sizing.html new file mode 100644 index 0000000000..0f469e4eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/subpixel-borders-with-child-border-box-sizing.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/subpixel-borders-with-child-border-box-sizing-ref.html"> +<meta name="assert" content="Sub-pixel borders should always appear, and not be + overdrawn by child content with box-sizing: border-box." /> +<head> + <style> + body { } + .outer { + border: solid .5px black; + background: red; + width: 101px; + height: 101px; + margin: 5px; + padding: 0px; + box-sizing: border-box; + } + .inner { + background: lightgreen; + padding: 0px; + box-sizing: border-box; + } + #inner1 { + width: 99px; + height: 99px; + } + #inner2 { + width: 100%; + height: 100%; + } + </style> +</head> +<body> + <div class="outer"> + <div class="inner" id="inner1"></div> + </div> + + <div class="outer"> + <div class="inner" id="inner2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-borders/subpixel-borders-with-child.html b/testing/web-platform/tests/css/css-borders/subpixel-borders-with-child.html new file mode 100644 index 0000000000..4257983259 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/subpixel-borders-with-child.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> +<link rel="match" href="reference/subpixel-borders-with-child-ref.html"> +<meta name="assert" content="Sub-pixel borders should always appear, and not be + overdrawn by child content." /> +<head> + <style> + .outer { + border: solid .5px black; + background: red; + width: 100px; + height: 100px; + margin: 5px; + } + .inner { + background: lightgreen + } + #inner1 { + width: 100px; + height: 100px; + } + #inner2 { + width: 100%; + height: 100%; + } + </style> +</head> +<body> + <div class="outer"> + <div class="inner" id="inner1"></div> + </div> + + <div class="outer"> + <div class="inner" id="inner2"></div> + </div> +</body> |