sibling-index-linear-gradient-gcs.html (1742B)
1 <!DOCTYPE html> 2 <title>CSS Values Test: getComputedStyle() for linear-gradient() with sibling-index()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize"> 5 <link rel="help" href="https://drafts.csswg.org/css-images-4/#linear-gradients"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #t1 { 10 background-image: linear-gradient(white, rgb(0 0 calc(sibling-index() * 200))); 11 } 12 #t2 { 13 background-image: cross-fade(linear-gradient(white, rgb(0 0 calc(sibling-index() * 200))) 40%, rgb(0 0 calc(sibling-index() * 200)) 60%); 14 } 15 #t3 { 16 background-image: image-set(linear-gradient(white, rgb(0 0 calc(sibling-index() * 200))) 1x); 17 } 18 </style> 19 <div> 20 <div id="t1"></div> 21 </div> 22 <div> 23 <div id="t2"></div> 24 </div> 25 <div> 26 <div id="t3"></div> 27 </div> 28 <script> 29 test(() => { 30 assert_equals(getComputedStyle(t1).backgroundImage, "linear-gradient(rgb(255, 255, 255), rgb(0, 0, 200))"); 31 }, "Check that sibling-index() is resolved in serialization of computed value of linear-gradient()"); 32 33 test(() => { 34 assert_equals(getComputedStyle(t2).backgroundImage, "cross-fade(linear-gradient(rgb(255, 255, 255), rgb(0, 0, 200)) 40%, rgb(0, 0, 200) 60%)"); 35 }, "Check that sibling-index() is resolved in serialization of computed value of linear-gradient() inside cross-fade()"); 36 37 test(() => { 38 assert_equals(getComputedStyle(t3).backgroundImage, "image-set(linear-gradient(rgb(255, 255, 255), rgb(0, 0, 200)) 1dppx)"); 39 }, "Check that sibling-index() is resolved in serialization of computed value of linear-gradient() inside image-set()"); 40 </script>