mask-shorthand-subproperties-reset.html (2243B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Resetting mask shorthand subproperties</title> 6 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 7 <link rel="help" href="https://drafts.fxtf.org/css-masking/#the-mask"> 8 <meta name="assert" content="All subproperties of the masking property are first reset to their initial values."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body> 13 <div id="test"></div> 14 <script> 15 16 function set_subproperty(property, value) { 17 const element = document.getElementById('test') 18 element.style = '' 19 element.style[property] = value 20 } 21 22 function test_shorthand_resetting_subproperty(property, newValue) { 23 if (!CSS.supports(property, newValue)) 24 return 25 test(() => { 26 let testElem = document.getElementById('test'); 27 let computed = window.getComputedStyle(testElem); 28 let initialValue = computed[property]; 29 set_subproperty(property, newValue); 30 document.getElementById('test').style.mask = 'url("#mask")'; 31 assert_equals(computed[property], initialValue); 32 assert_not_equals(computed.mask, ""); 33 }, 'Property ' + property + ' should be reset to its initial value.') 34 } 35 36 test_shorthand_resetting_subproperty('mask-border-mode', 'luminance'); 37 test_shorthand_resetting_subproperty('mask-border-outset', '10px 20px 30px 40px'); 38 test_shorthand_resetting_subproperty('mask-border-repeat', 'round space'); 39 test_shorthand_resetting_subproperty('mask-border-slice', '1 2 3 4 fill'); 40 test_shorthand_resetting_subproperty('mask-border-source', 'url("#mask-border")'); 41 test_shorthand_resetting_subproperty('mask-border-width', '10px 20px 30px 40px'); 42 test_shorthand_resetting_subproperty('mask-clip', 'no-clip') 43 test_shorthand_resetting_subproperty('mask-composite', 'subtract') 44 test_shorthand_resetting_subproperty('mask-image', 'url("#mask-image")') 45 test_shorthand_resetting_subproperty('mask-mode', 'luminance') 46 test_shorthand_resetting_subproperty('mask-origin', 'content-box') 47 test_shorthand_resetting_subproperty('mask-position', '10px 10px') 48 test_shorthand_resetting_subproperty('mask-repeat', 'no-repeat') 49 test_shorthand_resetting_subproperty('mask-size', '10px') 50 </script> 51 </body> 52 </html>