test_background_blend_mode.html (1850B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for miscellaneous computed style issues</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 7 </head> 8 <body> 9 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 10 <p id="display"></p> 11 <div id="content" style="display: none"> 12 13 </div> 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 /** Test for miscellaneous computed style issues */ 18 19 var frame_container = document.getElementById("display"); 20 var noframe_container = document.getElementById("content"); 21 22 function test_bug_841601() { 23 // Test handling of background-blend-mode 24 var p = document.createElement("p"); 25 var cs = getComputedStyle(p, ""); 26 27 frame_container.appendChild(p); 28 is(cs.backgroundBlendMode, "normal", 29 "default value of background-blend-mode"); 30 31 p.setAttribute("style", "background-blend-mode: normal, invalid"); 32 cs = getComputedStyle(p, ""); 33 is(cs.backgroundBlendMode, "normal", 34 "set invalid blendmode"); 35 36 p.setAttribute("style", "background-blend-mode: normal, normal"); 37 cs = getComputedStyle(p, ""); 38 is(cs.backgroundBlendMode, "normal, normal", 39 "set normal blendmode twice"); 40 41 p.setAttribute("style", "background-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity"); 42 cs = getComputedStyle(p, ""); 43 is(cs.backgroundBlendMode, "normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity", 44 "set all blendmodes"); 45 46 p.remove(); 47 48 SimpleTest.finish(); 49 } 50 51 SimpleTest.waitForExplicitFinish(); 52 test_bug_841601(); 53 54 </script> 55 </pre> 56 </body> 57 </html>