background-valid.html (3536B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Backgrounds and Borders Module Level 3: parsing background with valid values</title> 6 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> 8 <meta name="assert" content="background supports the full grammar '<bg-layer># , <final-bg-layer>'."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/parsing-testcommon.js"></script> 12 <script src="/css/support/shorthand-testcommon.js"></script> 13 </head> 14 <body> 15 <script> 16 17 // Background serialization varies across browsers. https://github.com/w3c/csswg-drafts/issues/418 18 test_valid_value("background", 19 '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', [ 20 '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 21 '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 22 '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 23 '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 24 ]); 25 26 test_shorthand_value('background', 'none', { 27 'background-image': 'none', 28 'background-position': '0% 0%', 29 'background-size': 'auto', 30 'background-repeat': 'repeat', 31 'background-attachment': 'scroll', 32 'background-origin': 'padding-box', 33 'background-clip': 'border-box', 34 'background-color': 'rgba(0, 0, 0, 0)', 35 }) 36 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', { 37 'background-image': 'url("https://example.com/"), url("https://example.com/")', 38 'background-position': '1px 2px, 1px 2px', 39 'background-size': '3px 4px, 3px 4px', 40 'background-repeat': 'space round, space round', 41 'background-attachment': 'local, local', 42 'background-origin': 'padding-box, padding-box', 43 'background-clip': 'content-box, content-box', 44 'background-color': 'rgb(5, 6, 7)', 45 }) 46 test_shorthand_value('background', 'border-box content-box', { 47 'background-image': 'none', 48 'background-position': '0% 0%', 49 'background-size': 'auto', 50 'background-repeat': 'repeat', 51 'background-attachment': 'scroll', 52 'background-origin': 'border-box', 53 'background-clip': 'content-box', 54 'background-color': 'transparent', 55 }) 56 test_shorthand_value('background', 'border-area', { 57 'background-image': 'none', 58 'background-position': '0% 0%', 59 'background-size': 'auto', 60 'background-repeat': 'repeat', 61 'background-attachment': 'scroll', 62 'background-origin': 'border-box', 63 'background-clip': 'border-area', 64 'background-color': 'transparent', 65 }) 66 67 </script> 68 </body> 69 </html>