third_party/WebKit/LayoutTests/http/tests/security/cross-origin-css.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Cross-origin CSS</title>
   5
   6 <script src="/resources/testharness.js"></script>
   7 <script src="/resources/testharnessreport.js"></script>
   8
   9 <link rel="stylesheet"
  10       href="resources/redir.php?url=http://localhost:8000/security/resources/xorigincss1.html"></link>
  11 <link rel="stylesheet"
  12       type="text/css"
  13       href="resources/redir.php?url=http://localhost:8000/security/resources/xorigincss2.html"></link>
  14 <link rel="stylesheet"
  15       href="resources/redir.php?url=http://localhost:8000/security/resources/xorigincss1.css"></link>
  16 <link rel="stylesheet"
  17       href="resources/xorigincss3.html"></link>
  18 <style>
  19 /* Deliberately reuse the same file / class / id on this first one */
  20 @import "resources/redir.php?url=http://localhost:8000/security/resources/xorigincss2.html";
  21 @import "resources/redir.php?url=http://localhost:8000/security/resources/xorigincss4.html";
  22 @import "resources/redir.php?url=http://localhost:8000/security/resources/xorigincss7.html";
  23 @import "resources/redir.php?url=http://localhost:8000/security/resources/xorigincss2.css";
  24 @import "resources/xorigincss5.html";
  25
  26 /* Check that data: is still allowed for non-CORS cross-origin image fetches. */
  27 #data-background-url {
  28     content: "PASS (image loaded)";
  29     background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='0px' height='0px'></svg>");
  30 }
  31 </style>
  32 <script>
  33     function getBackgroundColorForId(id) {
  34         return window.getComputedStyle(document.getElementById(id), null).getPropertyValue('background-color')
  35     }
  36     var onloadTest = async_test("Testing cross-origin and MIME behavior for CSS.");
  37     window.onload = function () {
  38         test(function () {
  39             assert_equals(getBackgroundColorForId('id1'), 'rgba(0, 0, 0, 0)');
  40         }, 'xorigincss1.html should not be loaded via <link>.');
  41         test(function () {
  42             assert_equals(getBackgroundColorForId('id2'), 'rgba(0, 0, 0, 0)');
  43         }, 'xorigincss2.html should not be loaded either via <link> or @import.');
  44         test(function () {
  45             assert_equals(getBackgroundColorForId('id3'), 'rgb(255, 255, 0)');
  46         }, 'xorigincss1.css should be loaded via <link>');
  47         test(function () {
  48             assert_equals(getBackgroundColorForId('id4'), 'rgba(0, 0, 0, 0)');
  49         }, 'xorigincss3.html should not be loaded, even though it is same-origin');
  50         test(function () {
  51             assert_equals(getBackgroundColorForId('id5'), 'rgba(0, 0, 0, 0)');
  52         }, 'xorigincss4.html should not be loaded via @import.');
  53         test(function () {
  54             assert_equals(getBackgroundColorForId('id6'), 'rgb(255, 255, 0)');
  55         }, 'xorigincss2.css should be loaded.');
  56         test(function () {
  57             assert_equals(getBackgroundColorForId('id7'), 'rgba(0, 0, 0, 0)');
  58         }, 'xorigincss5.html should not be loaded.');
  59         test(function () {
  60             assert_equals(getBackgroundColorForId('id8'), 'rgba(0, 0, 0, 0)');
  61         }, 'xorigincss7.html should not be loaded.');
  62         onloadTest.done();
  63     };
  64 </script>
  65 </head>
  66 <body>
  67     <div id="id1" class="id1"></div>
  68     <div id="id2" class="id2"></div>
  69     <div id="id3" class="id3"></div>
  70     <div id="id4" class="id4"></div>
  71     <div id="id5" class="id5"></div>
  72     <div id="id6" class="id6"></div>
  73     <div id="id7" class="id7"></div>
  74     <div id="id8" class="id8"></div>
  75     <div id="data-background-url">PASS background image loaded</div>
  76 </body>
  77 </html>