test_inlinestyle.html (5491B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for Content Security Policy inline stylesheets stuff</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 <p id="display"></p> 10 <div id="content" style="display: none"> 11 </div> 12 13 <iframe style="width:100%;height:300px;" id='cspframe1'></iframe> 14 <iframe style="width:100%;height:300px;" id='cspframe2'></iframe> 15 <script class="testbody" type="text/javascript"> 16 17 ////////////////////////////////////////////////////////////////////// 18 // set up and go 19 SimpleTest.waitForExplicitFinish(); 20 21 var done = 0; 22 23 // When a CSP 1.0 compliant policy is specified we should block inline 24 // styles applied by <style> element, style attribute, and SMIL <animate> and <set> tags 25 // (when it's not explicitly allowed.) 26 function checkStyles(evt) { 27 var cspframe = document.getElementById('cspframe1'); 28 var color; 29 30 // black means the style wasn't applied. green colors are used for styles 31 //expected to be applied. A color is red if a style is erroneously applied 32 color = window.getComputedStyle(cspframe.contentDocument.getElementById('linkstylediv')).color; 33 ok('rgb(0, 255, 0)' === color, 'External Stylesheet (' + color + ')'); 34 color = window.getComputedStyle(cspframe.contentDocument.getElementById('inlinestylediv')).color; 35 ok('rgb(0, 0, 0)' === color, 'Inline Style TAG (' + color + ')'); 36 color = window.getComputedStyle(cspframe.contentDocument.getElementById('attrstylediv')).color; 37 ok('rgb(0, 0, 0)' === color, 'Style Attribute (' + color + ')'); 38 color = window.getComputedStyle(cspframe.contentDocument.getElementById('csstextstylediv')).color; 39 ok('rgb(0, 255, 0)' === color, 'cssText (' + color + ')'); 40 // SMIL tests 41 color = window.getComputedStyle(cspframe.contentDocument.getElementById('xmlTest',null)).fill; 42 ok('rgb(0, 0, 0)' === color, 'XML Attribute styling (SMIL) (' + color + ')'); 43 color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssOverrideTest',null)).fill; 44 ok('rgb(0, 0, 0)' === color, 'CSS Override styling (SMIL) (' + color + ')'); 45 color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssOverrideTestById',null)).fill; 46 ok('rgb(0, 0, 0)' === color, 'CSS Override styling via ID lookup (SMIL) (' + color + ')'); 47 color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssSetTestById',null)).fill; 48 ok('rgb(0, 0, 0)' === color, 'CSS Set Element styling via ID lookup (SMIL) (' + color + ')'); 49 50 color = window.getComputedStyle(cspframe.contentDocument.getElementById('modifycsstextdiv')).color; 51 ok('rgb(0, 255, 0)' === color, 'Modify loaded style sheet via cssText (' + color + ')'); 52 53 checkIfDone(); 54 } 55 56 // When a CSP 1.0 compliant policy is specified we should allow inline 57 // styles when it is explicitly allowed. 58 function checkStylesAllowed(evt) { 59 var cspframe = document.getElementById('cspframe2'); 60 var color; 61 62 // black means the style wasn't applied. green colors are used for styles 63 // expected to be applied. A color is red if a style is erroneously applied 64 color = window.getComputedStyle(cspframe.contentDocument.getElementById('linkstylediv')).color; 65 ok('rgb(0, 255, 0)' === color, 'External Stylesheet (' + color + ')'); 66 color = window.getComputedStyle(cspframe.contentDocument.getElementById('inlinestylediv')).color; 67 ok('rgb(0, 255, 0)' === color, 'Inline Style TAG (' + color + ')'); 68 color = window.getComputedStyle(cspframe.contentDocument.getElementById('attrstylediv')).color; 69 ok('rgb(0, 255, 0)' === color, 'Style Attribute (' + color + ')'); 70 71 // Note that the below test will fail if "script-src: 'unsafe-inline'" breaks, 72 // since it relies on executing script to set .cssText 73 color = window.getComputedStyle(cspframe.contentDocument.getElementById('csstextstylediv')).color; 74 ok('rgb(0, 255, 0)' === color, 'style.cssText (' + color + ')'); 75 // SMIL tests 76 color = window.getComputedStyle(cspframe.contentDocument.getElementById('xmlTest',null)).fill; 77 ok('rgb(0, 255, 0)' === color, 'XML Attribute styling (SMIL) (' + color + ')'); 78 color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssOverrideTest',null)).fill; 79 ok('rgb(0, 255, 0)' === color, 'CSS Override styling (SMIL) (' + color + ')'); 80 color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssOverrideTestById',null)).fill; 81 ok('rgb(0, 255, 0)' === color, 'CSS Override styling via ID lookup (SMIL) (' + color + ')'); 82 color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssSetTestById',null)).fill; 83 ok('rgb(0, 255, 0)' === color, 'CSS Set Element styling via ID lookup (SMIL) (' + color + ')'); 84 85 color = window.getComputedStyle(cspframe.contentDocument.getElementById('modifycsstextdiv')).color; 86 ok('rgb(0, 255, 0)' === color, 'Modify loaded style sheet via cssText (' + color + ')'); 87 88 checkIfDone(); 89 } 90 91 function checkIfDone() { 92 done++; 93 if (done == 2) 94 SimpleTest.finish(); 95 } 96 97 // save this for last so that our listeners are registered. 98 // ... this loads the testbed of good and bad requests. 99 document.getElementById('cspframe1').src = 'file_inlinestyle_main.html'; 100 document.getElementById('cspframe1').addEventListener('load', checkStyles); 101 document.getElementById('cspframe2').src = 'file_inlinestyle_main_allowed.html'; 102 document.getElementById('cspframe2').addEventListener('load', checkStylesAllowed); 103 104 </script> 105 </pre> 106 </body> 107 </html>