Sam Weinig
99eb022f9f
Automatic update from web-platform-tests Update background/mask computed value serializations to match the spec (#60368) Exports WebKit changes from https://commits.webkit.org/314242@main. As resolved in CSSWG w3c/csswg-drafts#12791. -- wpt-commits: 120377354764508ff274de1acd64bfed663ab257 wpt-pr: 60368
91 lines
4.3 KiB
HTML
91 lines
4.3 KiB
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>
|