<!DOCTYPE HTML> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html> <head> <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> <script type="application/javascript"> function check_styles() { var redText = document.getElementById('red-text'); var greenText = document.getElementById('green-text'); var blueText = document.getElementById('blue-text'); var redTextColor = window.getComputedStyle(redText, null).getPropertyValue('color'); var greenTextColor = window.getComputedStyle(greenText, null).getPropertyValue('color'); var blueTextColor = window.getComputedStyle(blueText, null).getPropertyValue('color'); ok(redTextColor == 'rgb(255, 0, 0)', "The first part should be red."); ok(greenTextColor == 'rgb(0, 255, 0)', "The second part should be green."); ok(blueTextColor == 'rgb(0, 0, 255)', "The third part should be blue."); } SimpleTest.waitForExplicitFinish(); window.onload = function() { check_styles(); SimpleTest.finish(); } </script> <script> function good_correctHashCORSLoaded() { ok(true, "A CORS cross-domain stylesheet with correct hash was correctly loaded."); } function bad_correctHashCORSBlocked() { ok(false, "We should load CORS cross-domain stylesheets with hashes that match!"); } function good_correctHashBlocked() { ok(true, "A non-CORS cross-domain stylesheet with correct hash was correctly blocked."); } function bad_correctHashLoaded() { ok(false, "We should block non-CORS cross-domain stylesheets with hashes that match!"); } function good_incorrectHashBlocked() { ok(true, "A non-CORS cross-domain stylesheet with incorrect hash was correctly blocked."); } function bad_incorrectHashLoaded() { ok(false, "We should load non-CORS cross-domain stylesheets with incorrect hashes!"); } function bad_correctDataBlocked() { ok(false, "We should not block non-CORS cross-domain stylesheets in data: URI!"); } function good_correctDataLoaded() { ok(true, "A non-CORS cross-domain stylesheet with data: URI was correctly loaded."); } function bad_correctDataCORSBlocked() { ok(false, "We should not block CORS stylesheets in data: URI!"); } function good_correctDataCORSLoaded() { ok(true, "A CORS stylesheet with data: URI was correctly loaded."); } function good_correctHashOpaqueBlocked() { ok(true, "A non-CORS(Opaque) cross-domain stylesheet with correct hash was correctly blocked."); } function bad_correctHashOpaqueLoaded() { ok(false, "We should not load non-CORS(Opaque) cross-domain stylesheets with correct hashes!"); } </script> <!-- valid CORS sha256 hash --> <link rel="stylesheet" href="http://example.com/tests/dom/security/test/sri/style1.css" crossorigin="anonymous" integrity="sha256-qs8lnkunWoVldk5d5E+652yth4VTSHohlBKQvvgGwa8=" onerror="bad_correctHashCORSBlocked()" onload="good_correctHashCORSLoaded()"> <!-- valid non-CORS sha256 hash --> <link rel="stylesheet" href="style_301.css" integrity="sha256-qs8lnkunWoVldk5d5E+652yth4VTSHohlBKQvvgGwa8=" onerror="good_correctHashBlocked()" onload="bad_correctHashLoaded()"> <!-- invalid non-CORS sha256 hash --> <link rel="stylesheet" href="style_301.css?again" integrity="sha256-bogus" onerror="good_incorrectHashBlocked()" onload="bad_incorrectHashLoaded()"> <!-- valid non-CORS sha256 hash in a data: URL --> <link rel="stylesheet" href="data:text/css,.green-text{color:rgb(0, 255, 0)}" integrity="sha256-EhVtGGyovvffvYdhyqJxUJ/ekam7zlxxo46iM13cwP0=" onerror="bad_correctDataBlocked()" onload="good_correctDataLoaded()"> <!-- valid CORS sha256 hash in a data: URL --> <link rel="stylesheet" href="data:text/css,.blue-text{color:rgb(0, 0, 255)}" crossorigin="anonymous" integrity="sha256-m0Fs2hNSyPOn1030Dp+c8pJFHNmwpeTbB+8J/DcqLss=" onerror="bad_correctDataCORSBlocked()" onload="good_correctDataCORSLoaded()"> <!-- valid non-CORS sha256 hash --> <link rel="stylesheet" href="http://example.com/tests/dom/security/test/sri/style1.css" integrity="sha256-qs8lnkunWoVldk5d5E+652yth4VTSHohlBKQvvgGwa8=" onerror="good_correctHashOpaqueBlocked()" onload="bad_correctHashOpaqueLoaded()"> </head> <body> <p><span id="red-text">This should be red</span> but <span id="green-text" class="green-text">this should be green</span> and <span id="blue-text" class="blue-text">this should be blue</span></p> <p id="display"></p> <div id="content" style="display: none"> </div> <pre id="test"> </pre> </body> </html>