iframe_style_sameorigin.html (6775B)
1 <!DOCTYPE HTML> 2 <!-- Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <head> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 8 <script type="application/javascript"> 9 function check_styles() { 10 var redText = document.getElementById('red-text'); 11 var blueText = document.getElementById('blue-text-element'); 12 var blackText1 = document.getElementById('black-text'); 13 var blackText2 = document.getElementById('black-text-2'); 14 var redTextColor = window.getComputedStyle(redText).getPropertyValue('color'); 15 var blueTextColor = window.getComputedStyle(blueText).getPropertyValue('color'); 16 var blackTextColor1 = window.getComputedStyle(blackText1).getPropertyValue('color'); 17 var blackTextColor2 = window.getComputedStyle(blackText2).getPropertyValue('color'); 18 ok(redTextColor == 'rgb(255, 0, 0)', "The first part should be red."); 19 ok(blueTextColor == 'rgb(0, 0, 255)', "The second part should be blue."); 20 ok(blackTextColor1 == 'rgb(0, 0, 0)', "The second last part should still be black."); 21 ok(blackTextColor2 == 'rgb(0, 0, 0)', "The last part should still be black."); 22 } 23 24 SimpleTest.waitForExplicitFinish(); 25 window.onload = function() { 26 check_styles(); 27 SimpleTest.finish(); 28 } 29 </script> 30 <script> 31 function good_correctHashLoaded() { 32 ok(true, "A stylesheet was correctly loaded when integrity matched"); 33 } 34 function bad_correctHashBlocked() { 35 ok(false, "We should load stylesheets with hashes that match!"); 36 } 37 38 function good_emptyIntegrityLoaded() { 39 ok(true, "A stylesheet was correctly loaded when the integrity attribute was empty"); 40 } 41 function bad_emptyIntegrityBlocked() { 42 ok(false, "We should load stylesheets with empty integrity attributes!"); 43 } 44 45 function good_incorrectHashBlocked() { 46 ok(true, "A stylesheet was correctly blocked, because the hash digest was wrong"); 47 } 48 function bad_incorrectHashLoaded() { 49 ok(false, "We should not load stylesheets with hashes that do not match the content!"); 50 } 51 52 function good_validBlobLoaded() { 53 ok(true, "A stylesheet was loaded successfully from a blob: URL with the right hash."); 54 } 55 function bad_validBlobBlocked() { 56 ok(false, "We should load stylesheets using blob: URLs with the right hash!"); 57 } 58 function good_invalidBlobBlocked() { 59 ok(true, "A stylesheet was blocked successfully from a blob: URL with an invalid hash."); 60 } 61 function bad_invalidBlobLoaded() { 62 ok(false, "We should not load stylesheets using blob: URLs when they have the wrong hash!"); 63 } 64 65 function good_correctUTF8HashLoaded() { 66 ok(true, "A UTF8 stylesheet was correctly loaded when integrity matched"); 67 } 68 function bad_correctUTF8HashBlocked() { 69 ok(false, "We should load UTF8 stylesheets with hashes that match!"); 70 } 71 function good_correctUTF8BOMHashLoaded() { 72 ok(true, "A UTF8 stylesheet (with BOM) was correctly loaded when integrity matched"); 73 } 74 function bad_correctUTF8BOMHashBlocked() { 75 ok(false, "We should load UTF8 (with BOM) stylesheets with hashes that match!"); 76 } 77 function good_correctUTF8ishHashLoaded() { 78 ok(true, "A UTF8ish stylesheet was correctly loaded when integrity matched"); 79 } 80 function bad_correctUTF8ishHashBlocked() { 81 ok(false, "We should load UTF8ish stylesheets with hashes that match!"); 82 } 83 </script> 84 85 <!-- valid sha256 hash. should trigger onload --> 86 <link rel="stylesheet" href="style1.css" 87 integrity="sha256-qs8lnkunWoVldk5d5E+652yth4VTSHohlBKQvvgGwa8=" 88 onerror="bad_correctHashBlocked()" 89 onload="good_correctHashLoaded()"> 90 91 <!-- empty metadata. should trigger onload --> 92 <link rel="stylesheet" href="style2.css" 93 integrity="" 94 onerror="bad_emptyIntegrityBlocked()" 95 onload="good_emptyIntegrityLoaded()"> 96 97 <!-- invalid sha256 hash. should trigger onerror --> 98 <link rel="stylesheet" href="style3.css" 99 integrity="sha256-bogus" 100 onerror="good_incorrectHashBlocked()" 101 onload="bad_incorrectHashLoaded()"> 102 103 <!-- valid sha384 hash of a utf8 file. should trigger onload --> 104 <link rel="stylesheet" href="style4.css" 105 integrity="sha384-13rt+j7xMDLhohLukb7AZx8lDGS3hkahp0IoeuyvxSNVPyc1QQmTDcwXGhQZjoMH" 106 onerror="bad_correctUTF8HashBlocked()" 107 onload="good_correctUTF8HashLoaded()"> 108 109 <!-- valid sha384 hash of a utf8 file with a BOM. should trigger onload --> 110 <link rel="stylesheet" href="style5.css" 111 integrity="sha384-udAqVKPIHf/OD1isAYKrgzsog/3Q6lSEL2nKhtLSTmHryiae0+y6x1akeTzEF446" 112 onerror="bad_correctUTF8BOMHashBlocked()" 113 onload="good_correctUTF8BOMHashLoaded()"> 114 115 <!-- valid sha384 hash of a utf8 file with the wrong charset. should trigger onload --> 116 <link rel="stylesheet" href="style6.css" 117 integrity="sha384-Xli4ROFoVGCiRgXyl7y8jv5Vm2yuqj+8tkNL3cUI7AHaCocna75JLs5xID437W6C" 118 onerror="bad_correctUTF8ishHashBlocked()" 119 onload="good_correctUTF8ishHashLoaded()"> 120 </head> 121 <body> 122 123 <!-- valid sha256 for a blob: URL --> 124 <script> 125 var blob = new Blob(['.blue-text{color:blue}'], 126 {type: 'text/css'}); 127 var link = document.createElement('link'); 128 link.rel = 'stylesheet'; 129 link.href = window.URL.createObjectURL(blob); 130 link.setAttribute('integrity', 'sha256-/F+EMVnTWYJOAzN5n7/21idiydu6nRi33LZOISZtwOM='); 131 link.onerror = bad_validBlobBlocked; 132 link.onload = good_validBlobLoaded; 133 document.body.appendChild(link); 134 </script> 135 136 <!-- invalid sha256 for a blob: URL --> 137 <script> 138 var blob = new Blob(['.black-text{color:blue}'], 139 {type: 'text/css'}); 140 var link = document.createElement('link'); 141 link.rel = 'stylesheet'; 142 link.href = window.URL.createObjectURL(blob); 143 link.setAttribute('integrity', 'sha256-/F+EMVnTWYJOAzN5n7/21idiydu6nRi33LZOISZtwOM='); 144 link.onerror = good_invalidBlobBlocked; 145 link.onload = bad_invalidBlobLoaded; 146 document.body.appendChild(link); 147 </script> 148 149 <p><span id="red-text">This should be red </span>, 150 <span id="purple-text">this should be purple</span>, 151 <span id="brown-text">this should be brown</span>, 152 <span id="orange-text">this should be orange</span>, and 153 <span class="blue-text" id="blue-text-element">this should be blue.</span> 154 However, <span id="black-text">this should stay black</span> and 155 <span class="black-text" id="black-text-2">this should also stay black.</span> 156 </p> 157 158 <p id="display"></p> 159 <div id="content" style="display: none"> 160 </div> 161 <pre id="test"> 162 </pre> 163 </body> 164 </html>