layout/style/test/test_bug511909.html
author Jan de Mooij <jdemooij@mozilla.com>
Mon, 27 Sep 2021 11:15:49 +0000
changeset 593265 5144ad09cfb7011b98c5422b78b82936b1343541
parent 469640 c9c0c6f2eed54a187e124942e53c3660b4cf17d8
permissions -rw-r--r--
Bug 1732281 part 2 - Transpile ValueToIteratorResult in Warp. r=iain Depends on D126514 Differential Revision: https://phabricator.services.mozilla.com/D126515

<html><!--
   https://bugzilla.mozilla.org/show_bug.cgi?id=511909
   --><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>@media and @-moz-document testcases</title>
  
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">

<style type="text/css">
a {
    font-weight: bold; 
}
  #pink {
    color: pink;
  }

  #green {
    color: green;
  }

  #blue {
    color: blue;
  }

pre {
   border: 1px solid black;
}
</style>

<style type="text/css">
@-moz-document regexp(".*test_bug511909.*"){
    #d {
      color: pink;
    }
}
</style>

<style type="text/css">
@media screen {
   #m {
      color: green;
   }
}
</style>

<style type="text/css">
@-moz-document regexp(".*test_bug511909.*"){
  @media screen {
      #dm {
         color: blue;
      }
   }
}
</style>

<!-- should parse -->
<style type="text/css">
@media print {
  @-moz-document regexp("not_this_url"),}
    #mx {
        color: pink;
    }
  }
}
</style>

<!-- should parse -->
<style type="text/css">
@-moz-document regexp("not_this_url"){
  @media print ,}
    #mxx {
      color: blue;
    }
  }
}
</style>

<style type="text/css">
@media screen {
  @-moz-document regexp(".*test_bug511909.*"){
      #md {
         color: green;
      }
   }
}
</style>

<style type="text/css">
@media screen {
  @-moz-document regexp(".*test_bug511909.*"){
      @media screen { 
        @-moz-document regexp(".*test_bug511909.*"){
          @media screen {
            #me {
             color: blue; 
            }
          }
        }
     }
   }
}
</style>
</head>
<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=511909">Mozilla Bug 511909</a>
  <p id="display"></p>
  <div id="content" style="display: none">
  </div>

  <script class="testbody" type="text/javascript">
    SimpleTest.waitForExplicitFinish();

    addLoadEvent(function() {
      SpecialPowers.pushPrefEnv(
        { "set": [["layout.css.moz-document.content.enabled", true ]]},
        function() {
          // Ensure all the sheets are re-parsed, so that the pref applies.
          for (const sheet of Array.from(document.querySelectorAll('style'))) {
            sheet.textContent += "/* dummy */";
          }

          var pink = getComputedStyle(document.getElementById("pink"), "");
          var green = getComputedStyle(document.getElementById("green"), "");
          var blue = getComputedStyle(document.getElementById("blue"), "");

          var cs1 = getComputedStyle(document.getElementById("d"), "");
          var cs2 = getComputedStyle(document.getElementById("m"), "");
          var cs3 = getComputedStyle(document.getElementById("dm"), "");
          var cs4 = getComputedStyle(document.getElementById("md"), "");
          var cs5 = getComputedStyle(document.getElementById("mx"), "");
          var cs6 = getComputedStyle(document.getElementById("mxx"), "");
          var cs7 = getComputedStyle(document.getElementById("me"), "");

          is(cs1.color, pink.color, "@-moz-document applies");
          is(cs2.color, green.color, "@media applies");
          is(cs3.color, blue.color, "@media nested in @-moz-document applies");
          is(cs4.color, green.color, "@-moz-document nested in @media applies");
          is(cs5.color, pink.color, "broken @media nested in @-moz-document correctly handled");
          is(cs6.color, blue.color, "broken @-moz-document nested in @media correctly handled");
          is(cs7.color, blue.color, "@media nested in @-moz-document nested in @media applies");
          SimpleTest.finish();
        })
    });
  </script>
<div>
<pre>default style
</pre>
<a id="pink">This line should be pink</a><br>
  
<a id="green">This line should be green</a><br>
  
<a id="blue">This line should be blue</a><br>
  
<pre>@-moz-document {...}
</pre>
<a id="d">This line should be pink</a><br>
<pre>@media screen {...}
</pre>
<a id="m">This line should be green</a><br>
<pre>@-moz-document {
   @media screen {...}
}
</pre>
<a id="dm">This line should be blue</a><br>
<pre>@media print {
  @-moz-document regexp("not_this_url"),}
    #mx {
        color: pink;
    }
  }
}
</pre>
<a id="mx">This line should be pink</a><br></div>
<pre>@-moz-document regexp("not_this_url"){
  @media print ,}
    #mxx {
      color: blue;
    }
  }
}
</pre>
<a id="mxx">This line should be blue</a><br>
<pre>@media screen {
  @-moz-documen {...}
}
</pre>
<a id="md">This line should be green</a><br>
<pre>@media screen {
  @-moz-document {
    @media screen {...}
  }
}
</pre>
<a id="me">This line should be blue</a><br>


</body></html>