wpt / css / css-backgrounds / parsing / border-width-computed.html

Status: PASS | Duration: 63ms | Subtests: 11/11 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (11/11)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
Property border-width value '1px'PASS
Property border-width value '1px 2px'PASS
Property border-width value '1px 2px 3px'PASS
Property border-width value '1px 2px 3px 4px'PASS
Property border-width value '0.5em'PASS
Property border-width value '2px thin medium thick'PASS
Property border-top-width value '0px'PASS
Property border-right-width value '10px'PASS
Property border-bottom-width value 'calc(-0.5em + 10px)'PASS
Property border-left-width value 'calc(0.5em + 10px)'PASS
thin ≤ medium ≤ thickPASS

/css/css-backgrounds/parsing/border-width-computed.html

<!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>