Blitz - WPT: background-computed.html

wpt / css / css-backgrounds / parsing / background-computed.html

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

Subtest	Status	Message
Property background-attachment value 'local'	FAIL	assert_true: 'local' is a supported value for background-attachment. expected true got false
Property background-attachment value 'scroll, fixed'	PASS
Property background-attachment value 'local, fixed, scroll'	FAIL	assert_true: 'local, fixed, scroll' is a supported value for background-attachment. expected true got false
Property background-attachment value 'local, fixed, scroll, fixed'	FAIL	assert_true: 'local, fixed, scroll, fixed' is a supported value for background-attachment. expected true got false
Property background-clip value 'border-box'	PASS
Property background-clip value 'content-box, border-box'	PASS
Property background-clip value 'border-box, padding-box, content-box'	PASS
Property background-clip value 'content-box, border-box, padding-box, content-box'	PASS
Property background-clip value 'content-box, border-box, padding-box'	PASS
Property background-clip value 'content-box, border-box, border-area'	FAIL	assert_true: 'content-box, border-box, border-area' is a supported value for background-clip. expected true got false
Property background-clip value 'border-area text'	FAIL	assert_true: 'border-area text' is a supported value for background-clip. expected true got false
Property background-clip value 'border-area text, content-box'	FAIL	assert_true: 'border-area text, content-box' is a supported value for background-clip. expected true got false
Property background-color value 'rgb(255, 0, 0)'	PASS
Property background-origin value 'border-box'	PASS
Property background-origin value 'content-box, border-box'	PASS
Property background-origin value 'border-box, padding-box, content-box'	PASS
Property background-origin value 'content-box, border-box, padding-box, content-box'	PASS
Property background-position value '50% 6px'	PASS
Property background-position value '12px 13px, 50% 6px'	PASS
Property background-position value '12px 13px, 50% 6px, 30px -10px'	PASS
Property background-position value '12px 13px, 50% 6px, 30px -10px, -7px 8px'	PASS
Property background-position-x value '0.5em'	PASS
Property background-position-x value '-20%, 10px'	PASS
Property background-position-x value 'center, left, right'	PASS
Property background-position-x value 'calc(10px - 0.5em), -20%, right, 15%'	PASS
Property background-position-y value '0.5em'	PASS
Property background-position-y value '-20%, 10px'	PASS
Property background-position-y value 'center, top, bottom'	PASS
Property background-position-y value 'calc(10px - 0.5em), -20%, bottom, 15%'	PASS
Property background-repeat value 'round'	PASS
Property background-repeat value 'repeat-x, repeat'	PASS
Property background-repeat value 'repeat space, round no-repeat, repeat-x'	PASS
Property background-repeat value 'repeat-y, round no-repeat, repeat-x, repeat'	PASS
Property background-size value 'contain'	PASS
Property background-size value 'auto 1px, 2% 3%'	PASS
Property background-size value 'auto 1px, 2% 3%, contain'	PASS
Property background-size value 'auto 1px, 2% 3%, contain, 7px 8px'	PASS
background shorthand with 'border-area text' computes background-clip correctly	FAIL	assert_equals: expected "border-area text" but got "border-box"
background shorthand with 'text border-area' computes background-clip correctly	FAIL	assert_equals: expected "border-area text" but got "border-box"

Enable JavaScript in test iframe

/css/css-backgrounds/parsing/background-computed.html

<!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 computed value layers for a property is not influenced by 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");
test_computed_value("background-attachment", "scroll, fixed");
test_computed_value("background-attachment", "local, fixed, scroll");
test_computed_value("background-attachment", "local, fixed, scroll, fixed");

test_computed_value("background-clip", "border-box");
test_computed_value("background-clip", "content-box, border-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");
test_computed_value("background-clip", "content-box, border-box, padding-box");
test_computed_value("background-clip", "content-box, border-box, border-area");
test_computed_value("background-clip", "border-area text");
test_computed_value("background-clip", "border-area text, content-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");
test_computed_value("background-origin", "content-box, border-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");

test_computed_value("background-position", "50% 6px");
test_computed_value("background-position", "12px 13px, 50% 6px");
test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px");
test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px, -7px 8px");

test_computed_value("background-position-x", "0.5em", "20px");
test_computed_value("background-position-x", "-20%, 10px");
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%, 15%");

test_computed_value("background-position-y", "0.5em", "20px");
test_computed_value("background-position-y", "-20%, 10px", "-20%, 10px");
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%, 15%");

test_computed_value("background-repeat", "round");
test_computed_value("background-repeat", "repeat-x, repeat");
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");

test_computed_value("background-size", "contain");
test_computed_value("background-size", "auto 1px, 2% 3%");
test_computed_value("background-size", "auto 1px, 2% 3%, contain");
test_computed_value("background-size", "auto 1px, 2% 3%, contain, 7px 8px");

// Verify background shorthand correctly computes background-clip.
test(() => {
  const target = document.getElementById('target');
  target.style.background = '';
  target.style.background = 'border-area text';
  assert_equals(getComputedStyle(target).backgroundClip, 'border-area text');
  target.style.background = '';
}, "background shorthand with 'border-area text' computes background-clip correctly");

test(() => {
  const target = document.getElementById('target');
  target.style.background = '';
  target.style.background = 'text border-area';
  assert_equals(getComputedStyle(target).backgroundClip, 'border-area text');
  target.style.background = '';
}, "background shorthand with 'text border-area' computes background-clip correctly");

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