gradient-position-computed.html (7452B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Images Module Level 4: computed styke of gradients focusing on the position values</title> 6 <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-images-4/#radial-gradients"> 8 <link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> 9 <link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position"> 10 <meta name="assert" content="gradient positions computed style is correctly serialized."> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/css/support/computed-testcommon.js"></script> 14 <style> 15 #target { 16 font-size: 40px; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="target"></div> 22 <script> 23 test_computed_value("background-image", "radial-gradient(at 10%, red, blue)", "radial-gradient(at 10% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 24 test_computed_value("background-image", "radial-gradient(at 20% 30px, red, blue)", "radial-gradient(at 20% 30px, rgb(255, 0, 0), rgb(0, 0, 255))"); 25 test_computed_value("background-image", "radial-gradient(at 30px center, red, blue)", "radial-gradient(at 30px 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 26 test_computed_value("background-image", "radial-gradient(at 40px top, red, blue)", "radial-gradient(at 40px 0%, rgb(255, 0, 0), rgb(0, 0, 255))"); 27 test_computed_value("background-image", "radial-gradient(at bottom 10% right 20%, red, blue)", "radial-gradient(at 80% 90%, rgb(255, 0, 0), rgb(0, 0, 255))"); 28 test_computed_value("background-image", "radial-gradient(at bottom right, red, blue)", "radial-gradient(at 100% 100%, rgb(255, 0, 0), rgb(0, 0, 255))"); 29 test_computed_value("background-image", "radial-gradient(at center, red, blue)", "radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))"); 30 test_computed_value("background-image", "radial-gradient(at center 50px, red, blue)", "radial-gradient(at 50% 50px, rgb(255, 0, 0), rgb(0, 0, 255))"); 31 test_computed_value("background-image", "radial-gradient(at center bottom, red, blue)", "radial-gradient(at 50% 100%, rgb(255, 0, 0), rgb(0, 0, 255))"); 32 test_computed_value("background-image", "radial-gradient(at center center, red, blue)", "radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))"); 33 test_computed_value("background-image", "radial-gradient(at center left, red, blue)", "radial-gradient(at 0% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 34 test_computed_value("background-image", "radial-gradient(at left, red, blue)", "radial-gradient(at 0% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 35 test_computed_value("background-image", "radial-gradient(at left bottom, red, blue)", "radial-gradient(at 0% 100%, rgb(255, 0, 0), rgb(0, 0, 255))"); 36 test_computed_value("background-image", "radial-gradient(at left center, red, blue)", "radial-gradient(at 0% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 37 test_computed_value("background-image", "radial-gradient(at right 40%, red, blue)", "radial-gradient(at 100% 40%, rgb(255, 0, 0), rgb(0, 0, 255))"); 38 test_computed_value("background-image", "radial-gradient(at right 30% top 60px, red, blue)", "radial-gradient(at 70% 60px, rgb(255, 0, 0), rgb(0, 0, 255))"); 39 test_computed_value("background-image", "radial-gradient(at top, red, blue)", "radial-gradient(at 50% 0%, rgb(255, 0, 0), rgb(0, 0, 255))"); 40 test_computed_value("background-image", "radial-gradient(at top center, red, blue)", "radial-gradient(at 50% 0%, rgb(255, 0, 0), rgb(0, 0, 255))"); 41 42 // Single keyword positions 43 test_computed_value("background-image", "conic-gradient(at top, red, blue)", "conic-gradient(at 50% 0%, rgb(255, 0, 0), rgb(0, 0, 255))"); 44 test_computed_value("background-image", "conic-gradient(at bottom, red, blue)", "conic-gradient(at 50% 100%, rgb(255, 0, 0), rgb(0, 0, 255))"); 45 test_computed_value("background-image", "conic-gradient(at left, red, blue)", "conic-gradient(at 0% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 46 test_computed_value("background-image", "conic-gradient(at right, red, blue)", "conic-gradient(at 100% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 47 test_computed_value("background-image", "conic-gradient(at center, red, blue)", "conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))"); 48 49 // Two keyword combinations 50 test_computed_value("background-image", "conic-gradient(at top left, red, blue)", "conic-gradient(at 0% 0%, rgb(255, 0, 0), rgb(0, 0, 255))"); 51 test_computed_value("background-image", "conic-gradient(at left top, red, blue)", "conic-gradient(at 0% 0%, rgb(255, 0, 0), rgb(0, 0, 255))"); 52 test_computed_value("background-image", "conic-gradient(at bottom right, red, blue)", "conic-gradient(at 100% 100%, rgb(255, 0, 0), rgb(0, 0, 255))"); 53 test_computed_value("background-image", "conic-gradient(at right bottom, red, blue)", "conic-gradient(at 100% 100%, rgb(255, 0, 0), rgb(0, 0, 255))"); 54 test_computed_value("background-image", "conic-gradient(at left center, red, blue)", "conic-gradient(at 0% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 55 test_computed_value("background-image", "conic-gradient(at center right, red, blue)", "conic-gradient(at 100% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 56 57 // Two offsets (lengths or percentages) 58 test_computed_value("background-image", "conic-gradient(at 10% 20%, red, blue)", "conic-gradient(at 10% 20%, rgb(255, 0, 0), rgb(0, 0, 255))"); 59 test_computed_value("background-image", "conic-gradient(at 0% 100%, red, blue)", "conic-gradient(at 0% 100%, rgb(255, 0, 0), rgb(0, 0, 255))"); 60 test_computed_value("background-image", "conic-gradient(at 50% 50%, red, blue)", "conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))"); 61 test_computed_value("background-image", "conic-gradient(at 20px 40px, red, blue)", "conic-gradient(at 20px 40px, rgb(255, 0, 0), rgb(0, 0, 255))"); 62 63 // Mixed keyword + offset 64 test_computed_value("background-image", "conic-gradient(at right 10px top 20px, red, blue)", "conic-gradient(at calc(100% - 10px) 20px, rgb(255, 0, 0), rgb(0, 0, 255))"); 65 test_computed_value("background-image", "conic-gradient(at left 5% bottom 10px, red, blue)", "conic-gradient(at 5% calc(100% - 10px), rgb(255, 0, 0), rgb(0, 0, 255))"); 66 test_computed_value("background-image", "conic-gradient(at top 5px right 10px, red, blue)", "conic-gradient(at calc(100% - 10px) 5px, rgb(255, 0, 0), rgb(0, 0, 255))"); 67 test_computed_value("background-image", "conic-gradient(at bottom 20px left 30px, red, blue)", "conic-gradient(at 30px calc(100% - 20px), rgb(255, 0, 0), rgb(0, 0, 255))"); 68 69 // Single offset (interpreted as x position) 70 test_computed_value("background-image", "conic-gradient(at 30%, red, blue)", "conic-gradient(at 30% 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 71 test_computed_value("background-image", "conic-gradient(at 70px, red, blue)", "conic-gradient(at 70px 50%, rgb(255, 0, 0), rgb(0, 0, 255))"); 72 73 // Out-of-range or negative offsets (still valid syntax) 74 test_computed_value("background-image", "conic-gradient(at -10% -20%, red, blue)", "conic-gradient(at -10% -20%, rgb(255, 0, 0), rgb(0, 0, 255))"); 75 test_computed_value("background-image", "conic-gradient(at 150% 200%, red, blue)", "conic-gradient(at 150% 200%, rgb(255, 0, 0), rgb(0, 0, 255))"); 76 test_computed_value("background-image", "conic-gradient(at -10px 50px, red, blue)", "conic-gradient(at -10px 50px, rgb(255, 0, 0), rgb(0, 0, 255))"); 77 test_computed_value("background-image", "conic-gradient(at 1000% 1000%, red, blue)", "conic-gradient(at 1000% 1000%, rgb(255, 0, 0), rgb(0, 0, 255))"); 78 79 </script>