background-computed.html (4266B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Backgrounds and Borders: getComputedStyle().background with multiple layers</title> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> 7 <meta name="assert" content="The number of layers is determined by the number of comma-separated values in the background-image property. ."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <style> 12 #target { 13 background-image: none, none, none; 14 font-size: 40px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="target"></div> 20 <script> 21 test_computed_value("background-attachment", "local", "local, local, local"); 22 test_computed_value("background-attachment", "scroll, fixed", "scroll, fixed, scroll"); 23 test_computed_value("background-attachment", "local, fixed, scroll"); 24 test_computed_value("background-attachment", "local, fixed, scroll, fixed", "local, fixed, scroll"); 25 26 test_computed_value("background-clip", "border-box", "border-box, border-box, border-box"); 27 test_computed_value("background-clip", "content-box, border-box", "content-box, border-box, content-box"); 28 test_computed_value("background-clip", "border-box, padding-box, content-box"); 29 test_computed_value("background-clip", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box"); 30 test_computed_value("background-clip", "content-box, border-box, padding-box", "content-box, border-box, padding-box"); 31 test_computed_value("background-clip", "content-box, border-box, border-area", "content-box, border-box, border-area"); 32 33 // background-color always computes as a single color. 34 test_computed_value("background-color", "rgb(255, 0, 0)"); 35 36 test_computed_value("background-origin", "border-box", "border-box, border-box, border-box"); 37 test_computed_value("background-origin", "content-box, border-box", "content-box, border-box, content-box"); 38 test_computed_value("background-origin", "border-box, padding-box, content-box"); 39 test_computed_value("background-origin", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box"); 40 41 test_computed_value("background-position", "50% 6px", "50% 6px, 50% 6px, 50% 6px"); 42 test_computed_value("background-position", "12px 13px, 50% 6px", "12px 13px, 50% 6px, 12px 13px"); 43 test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px"); 44 test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px, -7px 8px", "12px 13px, 50% 6px, 30px -10px"); 45 46 test_computed_value("background-position-x", "0.5em", "20px, 20px, 20px"); 47 test_computed_value("background-position-x", "-20%, 10px", "-20%, 10px, -20%"); 48 49 test_computed_value("background-position-x", "center, left, right", "50%, 0%, 100%"); 50 test_computed_value("background-position-x", "calc(10px - 0.5em), -20%, right, 15%", "-10px, -20%, 100%"); 51 52 test_computed_value("background-position-y", "0.5em", "20px, 20px, 20px"); 53 test_computed_value("background-position-y", "-20%, 10px", "-20%, 10px, -20%"); 54 test_computed_value("background-position-y", "center, top, bottom", "50%, 0%, 100%"); 55 test_computed_value("background-position-y", "calc(10px - 0.5em), -20%, bottom, 15%", "-10px, -20%, 100%"); 56 57 test_computed_value("background-repeat", "round", "round, round, round"); 58 test_computed_value("background-repeat", "repeat-x, repeat", "repeat-x, repeat, repeat-x"); 59 test_computed_value("background-repeat", "repeat space, round no-repeat, repeat-x"); 60 test_computed_value("background-repeat", "repeat-y, round no-repeat, repeat-x, repeat", "repeat-y, round no-repeat, repeat-x"); 61 62 test_computed_value("background-size", "contain", "contain, contain, contain"); 63 test_computed_value("background-size", "auto 1px, 2% 3%", "auto 1px, 2% 3%, auto 1px"); 64 test_computed_value("background-size", "auto 1px, 2% 3%, contain"); 65 test_computed_value("background-size", "auto 1px, 2% 3%, contain, 7px 8px", "auto 1px, 2% 3%, contain"); 66 67 // Open issue: Define serialization for background shorthand 68 // https://github.com/w3c/csswg-drafts/issues/418 69 // test_computed_value("background", "rgb(1, 2, 3) none 4px 5px / 6px 7px repeat space scroll border-box padding-box"); 70 </script> 71 </body> 72 </html>