cross-fade-computed-value.html (2554B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>cross-fade() computed value</title> 5 <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-images-4/#cross-fade-function"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/computed-testcommon.js"></script> 10 <style> 11 #target { 12 color: red; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="target"></div> 18 <script> 19 // https://drafts.csswg.org/css-images-4/#serialization specifies that 20 // “For cross-fade(), always serialize the <percentage>.”, but it's not clear what 21 // “the” percentage is, since the implicit percentages are different for drawing and 22 // sizing, and may not be known computed-value time, so we assume one that is not 23 // given should also not be serialized. 24 test_computed_value( 25 'background-image', 26 'cross-fade(30% color-mix(in srgb, currentcolor, blue), white)', 27 'cross-fade(color(srgb 0.5 0 0.5) 30%, rgb(255, 255, 255))'); 28 29 // Unneccessary percentages should be kept. 30 test_computed_value('background-image', 'cross-fade(50% red, 50% green)', 31 'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%)'); 32 33 // Percentage normalization should not be visible computed-value time. 34 test_computed_value('background-image', 'cross-fade(20% red, 20% green)', 35 'cross-fade(rgb(255, 0, 0) 20%, rgb(0, 128, 0) 20%)'); 36 37 // More than two values. 38 test_computed_value('background-image', 39 'cross-fade(50% red, 50% green, 50% blue)', 40 'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%, rgb(0, 0, 255) 50%)'); 41 42 // More-than-100% should be invalid, but in calc() we can't reject it parse-time; 43 // it will be clamped on serialization. 44 test_computed_value('background-image', 45 'cross-fade(calc(101%) red, green)', 46 'cross-fade(rgb(255, 0, 0) 100%, rgb(0, 128, 0))'); 47 test_computed_value('background-image', 48 'cross-fade(calc(-200%) red, green)', 49 'cross-fade(rgb(255, 0, 0) 0%, rgb(0, 128, 0))'); 50 51 // The percentage here is not resolvable parse-time, but should always be 49% 52 // for all reasonable font sizes. 53 test_computed_value('background-image', 54 'cross-fade(calc(50% + 1% * sign(1em - 10000px)) red, green)', 55 'cross-fade(rgb(255, 0, 0) 49%, rgb(0, 128, 0))'); 56 </script> 57 </body> 58 </html>