layout/style/test/test_css_cross_domain.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=524223 -->
   4 <head>
   5   <title>Test cross-domain CSS loading</title>
   6   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <link rel="stylesheet" type="text/css"
   8         href="/tests/SimpleTest/test.css"/>
   9   <style type="text/css">
  10     hr { border: none; clear: both }
  11     .column {
  12         margin: 10px;
  13         float: left;
  14     }
  15     iframe {
  16         width: 40px;
  17         height: 680px;
  18         border: none;
  19         margin: 0;
  20         padding: 0;
  21     }
  22     h2 { font-weight: normal; padding: 0 }
  23     ol, h2 { font-size: 13px; line-height: 20px; }
  24     ol { padding-left: 1em;
  25          list-style-type: upper-roman }
  26     ol ol { list-style-type: upper-alpha }
  27     ol ol ol { list-style-type: decimal }
  28   </style>
  29 </head>
  30 <body>
  31 <a target="_blank"
  32    href="https://bugzilla.mozilla.org/show_bug.cgi?id=524223">Mozilla
  33    Bug 524223</a>
  34
  35 <hr/>
  36
  37 <div class="column">
  38 <h2>&nbsp;</h2>
  39 <ol><li>text/css<ol><li>same origin<ol><li>valid</li>
  40                                        <li>malformed</li>
  41                                        <li>http error</li></ol></li>
  42                   <li>cross origin<ol><li>valid</li>
  43                                       <li>malformed</li>
  44                                       <li>http error</li></ol></li>
  45                   <li>same to cross<ol><li>valid</li>
  46                                        <li>malformed</li>
  47                                        <li>http error</li></ol></li>
  48                   <li>cross to same<ol><li>valid</li>
  49                                        <li>malformed</li>
  50                                        <li>http error</li></ol></li></ol></li>
  51     <li>text/html<ol><li>same origin<ol><li>valid</li>
  52                                         <li>malformed</li>
  53                                         <li>http error</li></ol></li>
  54                      <li>cross origin<ol><li>valid</li>
  55                                          <li>malformed</li>
  56                                          <li>http error</li></ol></li>
  57                      <li>same to cross<ol><li>valid</li>
  58                                           <li>malformed</li>
  59                                           <li>http error</li></ol></li>
  60                      <li>cross to same<ol><li>valid</li>
  61                                           <li>malformed</li>
  62                                           <li>http error</li></ol></li></ol></li>
  63 </ol>
  64 </div>
  65
  66 <div class="column">
  67 <h2>Quirks</h2>
  68 <div id="quirks-placeholder"></div>
  69 </div>
  70
  71 <div class="column">
  72 <h2>Standards</h2>
  73 <div id="standards-placeholder"></div>
  74 </div>
  75
  76 <script type="application/javascript">
  77
  78 const COLOR = {red: "rgb(255, 0, 0)", lime: "rgb(0, 255, 0)"};
  79
  80 // Cross origin requests with text/html as the contentType.
  81 // These requests will be blocked by ORB (when ORB is enabled),
  82 // thus the color of the element is not going to be changed.
  83 const BLOCKED_BY_ORB = ["JD1i", "JD1l", "JD2i", "JD2l"];
  84
  85 /** Test for Bug 524223 **/
  86 function check_iframe(ifr) {
  87   var doc = ifr.contentDocument;
  88   var cases = doc.getElementsByTagName("p");
  89
  90   for (var i = 0; i < cases.length; i++) {
  91           var color = doc.defaultView.getComputedStyle(cases[i])
  92         .getPropertyValue("background-color");
  93
  94     var id = cases[i].id;
  95     // only 'quirks' can have requests that are blocked by ORB.
  96     if (BLOCKED_BY_ORB.includes(id) && ifr.id === "quirks") {
  97             is(color, COLOR.red, ifr.id + " " + id);
  98     } else {
  99             is(color, COLOR.lime, ifr.id + " " + id);
 100     }
 101   }
 102 }
 103
 104 SimpleTest.waitForExplicitFinish();
 105
 106 function insertIFrames(src, id) {
 107   const quirks = document.createElement("iframe");
 108   quirks.src = "ccd-quirks.html";
 109   quirks.id = "quirks";
 110   document.getElementById("quirks-placeholder").replaceWith(quirks);
 111
 112   const standards = document.createElement("iframe");
 113   standards.src = "ccd-standards.html";
 114   standards.id = "standards";
 115   document.getElementById("standards-placeholder").replaceWith(standards);
 116 }
 117
 118 var hasQuirksLoaded = false;
 119 var hasStandardsLoaded = false;
 120
 121 function quirksLoaded() {
 122   hasQuirksLoaded = true;
 123   MaybeRunTest();
 124 }
 125
 126 function standardsLoaded() {
 127   hasStandardsLoaded = true;
 128   MaybeRunTest();
 129 }
 130
 131 function runTest() {
 132   check_iframe(document.getElementById("quirks"));
 133   check_iframe(document.getElementById("standards"));
 134 }
 135
 136 function MaybeRunTest() {
 137   if (!hasQuirksLoaded || !hasStandardsLoaded) {
 138       return;
 139   }
 140
 141   runTest();
 142   SimpleTest.finish();
 143 }
 144
 145 window.onload = async function() {
 146   await SpecialPowers.pushPrefEnv(
 147     {
 148       set: [
 149         ['browser.opaqueResponseBlocking', true],
 150         ['browser.opaqueResponseBlocking.javascriptValidator', true],
 151       ],
 152     }
 153   );
 154   insertIFrames();
 155 };
 156 </script>
 157 </body>
 158 </html>