background-image-valid.html (1911B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Backgrounds and Borders Module Level 3: parsing background-image 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-image"> 8 <meta name="assert" content="background-image supports the full grammar '<bg-image>#'."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/parsing-testcommon.js"></script> 12 </head> 13 <body> 14 <script> 15 test_valid_value("background-image", "none"); 16 17 // Safari removes quotes. 18 test_valid_value("background-image", 'url("http://www.example.com/")', ['url("http://www.example.com/")', 'url(http://www.example.com/)']); 19 test_valid_value("background-image", 'none, url("http://www.example.com/")', ['none, url("http://www.example.com/")', 'none, url(http://www.example.com/)']); 20 21 test_valid_value( 22 "background-image", 23 "cross-fade(50% url(http://www.example.com), 50% url(http://www.example.com))", [ 24 "cross-fade(url(http://www.example.com) 50%, url(http://www.example.com) 50%)", 25 'cross-fade(url("http://www.example.com") 50%, url("http://www.example.com") 50%)' 26 ]); 27 test_valid_value( 28 "background-image", 29 "cross-fade(red 33%, white 33%, blue)"); 30 test_valid_value( 31 "background-image", 32 "cross-fade(blue, linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(0, 212, 255) 100%))"); 33 test_valid_value("background-image", "cross-fade( 1% red, green)", "cross-fade(red 1%, green)"); 34 test_valid_value("background-image", "cross-fade(1% red , green)", "cross-fade(red 1%, green)"); 35 test_valid_value("background-image", "cross-fade(1% red, green )", "cross-fade(red 1%, green)"); 36 test_valid_value("background-image", "cross-fade(red 1%, cross-fade(red 2%, green))"); 37 </script> 38 </body> 39 </html>