mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-28 21:26:22 +00:00
LibWeb: Import CSS logical border property parsing WPT tests
This commit is contained in:
Callum Law
Sam Atkins
parent
7d50dba3fc
commit
ceb1c37ba3
Notes:
github-actions[bot]
2025-07-09 09:12:17 +00:00
Author: https://github.com/Calme1709
Commit: ceb1c37ba3
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5366
Reviewed-by: https://github.com/AtkinsSJ ✅
16 changed files with 446 additions and 0 deletions
|
|
@ -0,0 +1,14 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 8 tests
|
||||||
|
|
||||||
|
6 Pass
|
||||||
|
2 Fail
|
||||||
|
Pass Property border-block-start-color value 'currentcolor'
|
||||||
|
Pass Property border-block-start-color value 'rgb(2, 3, 4)'
|
||||||
|
Pass Property border-block-end-color value 'rgb(34, 51, 68)'
|
||||||
|
Pass Property border-block-end-color value 'transparent'
|
||||||
|
Fail Property border-block-color value 'rgb(34, 51, 68)'
|
||||||
|
Pass Property border-block-color value 'transparent rgb(2, 3, 4)'
|
||||||
|
Fail Property border-block-color value 'rgb(2, 3, 4) rgb(2, 3, 4)'
|
||||||
|
Pass Property border-block-color value 'currentcolor lime'
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 13 tests
|
||||||
|
|
||||||
|
13 Pass
|
||||||
|
Pass Property border-block-start-style value 'dotted'
|
||||||
|
Pass Property border-block-start-style value 'groove'
|
||||||
|
Pass Property border-block-start-style value 'inset'
|
||||||
|
Pass Property border-block-start-style value 'none'
|
||||||
|
Pass Property border-block-start-style value 'solid'
|
||||||
|
Pass Property border-block-end-style value 'dashed'
|
||||||
|
Pass Property border-block-end-style value 'double'
|
||||||
|
Pass Property border-block-end-style value 'hidden'
|
||||||
|
Pass Property border-block-end-style value 'outset'
|
||||||
|
Pass Property border-block-end-style value 'ridge'
|
||||||
|
Pass Property border-block-style value 'dotted'
|
||||||
|
Pass Property border-block-style value 'double groove'
|
||||||
|
Pass Property border-block-style value 'hidden hidden'
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 6 tests
|
||||||
|
|
||||||
|
4 Pass
|
||||||
|
2 Fail
|
||||||
|
Fail e.style['border-block'] = "1px dotted red" should set the property value
|
||||||
|
Fail e.style['border-block'] = "double" should set the property value
|
||||||
|
Pass e.style['border-block-start'] = "green double thin" should set the property value
|
||||||
|
Pass e.style['border-block-start'] = "green" should set the property value
|
||||||
|
Pass e.style['border-block-end'] = "thin" should set the property value
|
||||||
|
Pass e.style['border-block-end'] = "calc(10px - 0.5em) dotted red" should set the property value
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 11 tests
|
||||||
|
|
||||||
|
6 Pass
|
||||||
|
5 Fail
|
||||||
|
Pass Property border-block-start-width value 'calc(10px + 0.5em)'
|
||||||
|
Pass Property border-block-start-width value 'calc(10px - 0.5em)'
|
||||||
|
Pass Property border-block-start-width value 'thin'
|
||||||
|
Pass Property border-block-start-width value 'medium'
|
||||||
|
Fail Property border-block-end-width value 'calc(10px + 0.5em)'
|
||||||
|
Pass Property border-block-end-width value 'calc(10px - 0.5em)'
|
||||||
|
Fail Property border-block-end-width value 'thick'
|
||||||
|
Fail Property border-block-width value '10px'
|
||||||
|
Fail Property border-block-width value '10px 20px'
|
||||||
|
Fail Property border-block-width value '10px 10px'
|
||||||
|
Pass width is zero if the border block style is none or hidden
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 8 tests
|
||||||
|
|
||||||
|
6 Pass
|
||||||
|
2 Fail
|
||||||
|
Pass Property border-inline-start-color value 'currentcolor'
|
||||||
|
Pass Property border-inline-start-color value 'rgb(2, 3, 4)'
|
||||||
|
Pass Property border-inline-end-color value 'rgb(34, 51, 68)'
|
||||||
|
Pass Property border-inline-end-color value 'transparent'
|
||||||
|
Fail Property border-inline-color value 'rgb(34, 51, 68)'
|
||||||
|
Pass Property border-inline-color value 'transparent rgb(2, 3, 4)'
|
||||||
|
Fail Property border-inline-color value 'rgb(2, 3, 4) rgb(2, 3, 4)'
|
||||||
|
Pass Property border-inline-color value 'currentcolor lime'
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 13 tests
|
||||||
|
|
||||||
|
13 Pass
|
||||||
|
Pass Property border-inline-start-style value 'dotted'
|
||||||
|
Pass Property border-inline-start-style value 'groove'
|
||||||
|
Pass Property border-inline-start-style value 'inset'
|
||||||
|
Pass Property border-inline-start-style value 'none'
|
||||||
|
Pass Property border-inline-start-style value 'solid'
|
||||||
|
Pass Property border-inline-end-style value 'dashed'
|
||||||
|
Pass Property border-inline-end-style value 'double'
|
||||||
|
Pass Property border-inline-end-style value 'hidden'
|
||||||
|
Pass Property border-inline-end-style value 'outset'
|
||||||
|
Pass Property border-inline-end-style value 'ridge'
|
||||||
|
Pass Property border-inline-style value 'dotted'
|
||||||
|
Pass Property border-inline-style value 'double groove'
|
||||||
|
Pass Property border-inline-style value 'hidden hidden'
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 6 tests
|
||||||
|
|
||||||
|
4 Pass
|
||||||
|
2 Fail
|
||||||
|
Fail e.style['border-inline'] = "1px dotted red" should set the property value
|
||||||
|
Fail e.style['border-inline'] = "double" should set the property value
|
||||||
|
Pass e.style['border-inline-start'] = "green double thin" should set the property value
|
||||||
|
Pass e.style['border-inline-start'] = "green" should set the property value
|
||||||
|
Pass e.style['border-inline-end'] = "thin" should set the property value
|
||||||
|
Pass e.style['border-inline-end'] = "calc(10px - 0.5em) dotted red" should set the property value
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 11 tests
|
||||||
|
|
||||||
|
6 Pass
|
||||||
|
5 Fail
|
||||||
|
Pass Property border-inline-start-width value 'calc(10px + 0.5em)'
|
||||||
|
Pass Property border-inline-start-width value 'calc(10px - 0.5em)'
|
||||||
|
Pass Property border-inline-start-width value 'thin'
|
||||||
|
Pass Property border-inline-start-width value 'medium'
|
||||||
|
Fail Property border-inline-end-width value 'calc(10px + 0.5em)'
|
||||||
|
Pass Property border-inline-end-width value 'calc(10px - 0.5em)'
|
||||||
|
Fail Property border-inline-end-width value 'thick'
|
||||||
|
Fail Property border-inline-width value '10px'
|
||||||
|
Fail Property border-inline-width value '10px 20px'
|
||||||
|
Fail Property border-inline-width value '10px 10px'
|
||||||
|
Pass width is zero if the border block style is none or hidden
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: getComputedStyle().borderBlockColor</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color">
|
||||||
|
<meta name="assert" content="border-block-color is computed color(s).">
|
||||||
|
<script src="../../../resources/testharness.js"></script>
|
||||||
|
<script src="../../../resources/testharnessreport.js"></script>
|
||||||
|
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="box"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<style>
|
||||||
|
#target {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
test_computed_value("border-block-start-color", "currentcolor", 'rgb(0, 255, 0)');
|
||||||
|
test_computed_value("border-block-start-color", "rgb(2, 3, 4)");
|
||||||
|
test_computed_value("border-block-end-color", "rgb(34, 51, 68)");
|
||||||
|
test_computed_value("border-block-end-color", "transparent", "rgba(0, 0, 0, 0)");
|
||||||
|
test_computed_value("border-block-color", "rgb(34, 51, 68)");
|
||||||
|
test_computed_value("border-block-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)");
|
||||||
|
test_computed_value("border-block-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
|
||||||
|
test_computed_value("border-block-color", "currentcolor lime", 'rgb(0, 255, 0)');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: getComputedStyle().borderBlockStyle</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style">
|
||||||
|
<meta name="assert" content="border-block-style is specified keyword(s).">
|
||||||
|
<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-block-start-style", "dotted");
|
||||||
|
test_computed_value("border-block-start-style", "groove");
|
||||||
|
test_computed_value("border-block-start-style", "inset");
|
||||||
|
test_computed_value("border-block-start-style", "none");
|
||||||
|
test_computed_value("border-block-start-style", "solid");
|
||||||
|
test_computed_value("border-block-end-style", "dashed");
|
||||||
|
test_computed_value("border-block-end-style", "double");
|
||||||
|
test_computed_value("border-block-end-style", "hidden");
|
||||||
|
test_computed_value("border-block-end-style", "outset");
|
||||||
|
test_computed_value("border-block-end-style", "ridge");
|
||||||
|
test_computed_value("border-block-style", "dotted");
|
||||||
|
test_computed_value("border-block-style", "double groove");
|
||||||
|
test_computed_value("border-block-style", "hidden hidden", "hidden");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: parsing border-block with valid values</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block">
|
||||||
|
<meta name="assert" content="border-block 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>
|
||||||
|
// Similar to css-backgrounds/parsing/border-valid.html
|
||||||
|
|
||||||
|
test_valid_value("border-block", "1px dotted red");
|
||||||
|
test_valid_value("border-block", "double", ["double", "medium double"]);
|
||||||
|
|
||||||
|
test_valid_value("border-block-start", "green double thin", "thin double green");
|
||||||
|
test_valid_value("border-block-start", "green", ["green", "medium none green"]);
|
||||||
|
test_valid_value("border-block-end", "thin", ["thin", "thin none"]);
|
||||||
|
test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: getComputedStyle().borderBlockWidth</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width">
|
||||||
|
<meta name="assert" content="border-block-width is absolute length; zero if the border block 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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="box"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<style>
|
||||||
|
#box {
|
||||||
|
border-style: dotted; /* Avoid border-*-width computed style 0 */
|
||||||
|
border-top-width: thin;
|
||||||
|
border-right-width: medium;
|
||||||
|
border-bottom-width: thick;
|
||||||
|
}
|
||||||
|
#target {
|
||||||
|
font-size: 40px;
|
||||||
|
border-block-style: dotted; /* Avoid border-block-*-width computed style 0 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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-block-start-width", "calc(10px + 0.5em)", "30px");
|
||||||
|
test_computed_value("border-block-start-width", "calc(10px - 0.5em)", "0px");
|
||||||
|
test_computed_value("border-block-start-width", "thin", thinWidth);
|
||||||
|
test_computed_value("border-block-start-width", "medium", mediumWidth);
|
||||||
|
|
||||||
|
test_computed_value("border-block-end-width", "calc(10px + 0.5em)", "30px");
|
||||||
|
test_computed_value("border-block-end-width", "calc(10px - 0.5em)", "0px");
|
||||||
|
test_computed_value("border-block-end-width", "thick", thickWidth);
|
||||||
|
|
||||||
|
test_computed_value("border-block-width", "10px");
|
||||||
|
test_computed_value("border-block-width", "10px 20px");
|
||||||
|
test_computed_value("border-block-width", "10px 10px", "10px");
|
||||||
|
test(() => {
|
||||||
|
box.style.borderBlockStartWidth = '10px';
|
||||||
|
box.style.borderBlockEndWidth = '10px';
|
||||||
|
|
||||||
|
box.style.borderBlockStartStyle = 'groove';
|
||||||
|
box.style.borderBlockEndStyle = 'solid';
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockWidth, '10px');
|
||||||
|
|
||||||
|
box.style.borderBlockStartStyle = 'hidden';
|
||||||
|
box.style.borderBlockEndStyle = 'dashed';
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockWidth, '0px 10px');
|
||||||
|
|
||||||
|
box.style.borderBlockStartStyle = 'inset';
|
||||||
|
box.style.borderBlockEndStyle = 'none';
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockWidth, '10px 0px');
|
||||||
|
|
||||||
|
box.style.borderBlockStartStyle = 'none';
|
||||||
|
box.style.borderBlockEndStyle = 'hidden';
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderBlockWidth, '0px');
|
||||||
|
}, 'width is zero if the border block style is none or hidden');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: getComputedStyle().borderInlineColor</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
|
||||||
|
<meta name="assert" content="border-inline-color is computed color(s).">
|
||||||
|
<script src="../../../resources/testharness.js"></script>
|
||||||
|
<script src="../../../resources/testharnessreport.js"></script>
|
||||||
|
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="box"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<style>
|
||||||
|
#target {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
test_computed_value("border-inline-start-color", "currentcolor", 'rgb(0, 255, 0)');
|
||||||
|
test_computed_value("border-inline-start-color", "rgb(2, 3, 4)");
|
||||||
|
test_computed_value("border-inline-end-color", "rgb(34, 51, 68)");
|
||||||
|
test_computed_value("border-inline-end-color", "transparent", "rgba(0, 0, 0, 0)");
|
||||||
|
test_computed_value("border-inline-color", "rgb(34, 51, 68)");
|
||||||
|
test_computed_value("border-inline-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)");
|
||||||
|
test_computed_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
|
||||||
|
test_computed_value("border-inline-color", "currentcolor lime", 'rgb(0, 255, 0)');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: getComputedStyle().borderInlineStyle</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style">
|
||||||
|
<meta name="assert" content="border-inline-style is specified keyword(s).">
|
||||||
|
<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-inline-start-style", "dotted");
|
||||||
|
test_computed_value("border-inline-start-style", "groove");
|
||||||
|
test_computed_value("border-inline-start-style", "inset");
|
||||||
|
test_computed_value("border-inline-start-style", "none");
|
||||||
|
test_computed_value("border-inline-start-style", "solid");
|
||||||
|
test_computed_value("border-inline-end-style", "dashed");
|
||||||
|
test_computed_value("border-inline-end-style", "double");
|
||||||
|
test_computed_value("border-inline-end-style", "hidden");
|
||||||
|
test_computed_value("border-inline-end-style", "outset");
|
||||||
|
test_computed_value("border-inline-end-style", "ridge");
|
||||||
|
test_computed_value("border-inline-style", "dotted");
|
||||||
|
test_computed_value("border-inline-style", "double groove");
|
||||||
|
test_computed_value("border-inline-style", "hidden hidden", "hidden");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: parsing border-inline with valid values</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline">
|
||||||
|
<meta name="assert" content="border-inline 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>
|
||||||
|
// Similar to css-backgrounds/parsing/border-valid.html
|
||||||
|
|
||||||
|
test_valid_value("border-inline", "1px dotted red");
|
||||||
|
test_valid_value("border-inline", "double", ["double", "medium double"]);
|
||||||
|
|
||||||
|
test_valid_value("border-inline-start", "green double thin", "thin double green");
|
||||||
|
test_valid_value("border-inline-start", "green", ["green", "medium none green"]);
|
||||||
|
test_valid_value("border-inline-end", "thin", ["thin", "thin none"]);
|
||||||
|
test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Logical Properties and Values: getComputedStyle().borderInlineWidth</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
|
||||||
|
<meta name="assert" content="border-inline-width is absolute length; zero if the border block 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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="box"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<style>
|
||||||
|
#box {
|
||||||
|
border-style: dotted; /* Avoid border-*-width computed style 0 */
|
||||||
|
border-top-width: thin;
|
||||||
|
border-right-width: medium;
|
||||||
|
border-bottom-width: thick;
|
||||||
|
}
|
||||||
|
#target {
|
||||||
|
font-size: 40px;
|
||||||
|
border-inline-style: dotted; /* Avoid border-inline-*-width computed style 0 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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-inline-start-width", "calc(10px + 0.5em)", "30px");
|
||||||
|
test_computed_value("border-inline-start-width", "calc(10px - 0.5em)", "0px");
|
||||||
|
test_computed_value("border-inline-start-width", "thin", thinWidth);
|
||||||
|
test_computed_value("border-inline-start-width", "medium", mediumWidth);
|
||||||
|
|
||||||
|
test_computed_value("border-inline-end-width", "calc(10px + 0.5em)", "30px");
|
||||||
|
test_computed_value("border-inline-end-width", "calc(10px - 0.5em)", "0px");
|
||||||
|
test_computed_value("border-inline-end-width", "thick", thickWidth);
|
||||||
|
|
||||||
|
test_computed_value("border-inline-width", "10px");
|
||||||
|
test_computed_value("border-inline-width", "10px 20px");
|
||||||
|
test_computed_value("border-inline-width", "10px 10px", "10px");
|
||||||
|
test(() => {
|
||||||
|
box.style.borderInlineStartWidth = '10px';
|
||||||
|
box.style.borderInlineEndWidth = '10px';
|
||||||
|
|
||||||
|
box.style.borderInlineStartStyle = 'groove';
|
||||||
|
box.style.borderInlineEndStyle = 'solid';
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineWidth, '10px');
|
||||||
|
|
||||||
|
box.style.borderInlineStartStyle = 'hidden';
|
||||||
|
box.style.borderInlineEndStyle = 'dashed';
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineWidth, '0px 10px');
|
||||||
|
|
||||||
|
box.style.borderInlineStartStyle = 'inset';
|
||||||
|
box.style.borderInlineEndStyle = 'none';
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineWidth, '10px 0px');
|
||||||
|
|
||||||
|
box.style.borderInlineStartStyle = 'none';
|
||||||
|
box.style.borderInlineEndStyle = 'hidden';
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px');
|
||||||
|
assert_equals(getComputedStyle(box).borderInlineWidth, '0px');
|
||||||
|
}, 'width is zero if the border block style is none or hidden');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue