testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html
author Duncan McIntosh <dmcintosh@mozilla.com>
Wed, 09 Jul 2025 19:42:02 +0000 (4 hours ago)
changeset 795924 9ccc6a2267cbf69c621fec973bd28573c2a45a1f
parent 756901 f84e7920a7cda35d340b4be1446b28674a6518de
permissions -rw-r--r--
Bug 1966586 - Reuse other browser windows when opening _blank links in Taskbar Tabs windows. r=nrishel This doesn't affect other tab additions, nor does it stop the tab bar from appearing altogether. The idea is that _if_ another tab is somehow made, the user should see it; but we should not create new tabs if we can avoid it. This also adds tests for opening URIs in popups and taskbar tabs to make it less likely that this breaks in future. Differential Revision: https://phabricator.services.mozilla.com/D253726
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Backgrounds and Borders Module Level 3: parsing background with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background">
<meta name="assert" content="background supports the full grammar '<bg-layer># , <final-bg-layer>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script src="/css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>

// Background serialization varies across browsers. https://github.com/w3c/csswg-drafts/issues/418
test_valid_value("background",
  'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', [
  'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', // spec, WebKit
  'url("https://example.com/") local space round 1px 2px / 3px 4px padding-box content-box, url("https://example.com/") local space round 1px 2px / 3px 4px padding-box content-box rgb(5, 6, 7)', // Edge
  'url("https://example.com/") space round local 1px 2px / 3px 4px padding-box content-box, rgb(5, 6, 7) url("https://example.com/") space round local 1px 2px / 3px 4px padding-box content-box', // Firefox
  'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box rgb(5, 6, 7)' // Blink
]);

test_shorthand_value('background', 'none', {
    'background-image': 'none',
    'background-position': '0% 0%',
    'background-size': 'auto',
    'background-repeat': 'repeat',
    'background-attachment': 'scroll',
    'background-origin': 'padding-box',
    'background-clip': 'border-box',
    'background-color': 'rgba(0, 0, 0, 0)',
})
test_shorthand_value('background', 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', {
    'background-image': 'url("https://example.com/"), url("https://example.com/")',
    'background-position': '1px 2px, 1px 2px',
    'background-size': '3px 4px, 3px 4px',
    'background-repeat': 'space round, space round',
    'background-attachment': 'local, local',
    'background-origin': 'padding-box, padding-box',
    'background-clip': 'content-box, content-box',
    'background-color': 'rgb(5, 6, 7)',
})

</script>
</body>
</html>