layout/style/test/test_acid3_test46.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=156716
   5 -->
   6 <!--
   7
   8 This is test 46 from the Acid3 test, http://acid3.acidtests.org/
   9 extracted from the test framework there and put into Mochitest.
  10
  11 (from irc.mozilla.org, developers)
  12 [2008-05-14 18:07:38] <Hixie> dbaron: I hereby grant all files available from the server http://acid3.acidtests.org/ under the following license: (c) copyright 2008 Ian Hickson. These documents may be used under the terms of any of the following licenses: MPL. GPL. LGPL. BSD.
  13
  14 -->
  15 <head>
  16   <title>Test for Bug 156716</title>
  17   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  18   <style type="text/css">
  19   iframe#selectors { width: 0; height: 0; }
  20   </style>
  21   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  22 </head>
  23 <body>
  24 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a>
  25 <div id="content" style="display: none">
  26
  27 </div>
  28 <pre id="test">
  29 <script class="testbody" type="text/javascript">
  30
  31 /** Test for Bug 156716 **/
  32 SimpleTest.waitForExplicitFinish();
  33 function runTest() {
  34
  35   function getTestDocument() {
  36     var iframe = document.getElementById("selectors");
  37     var doc = iframe.contentDocument;
  38     for (var i = doc.documentElement.childNodes.length-1; i >= 0; i -= 1)
  39       doc.documentElement.removeChild(doc.documentElement.childNodes[i]);
  40     doc.documentElement.appendChild(doc.createElement('head'));
  41     doc.documentElement.firstChild.appendChild(doc.createElement('title'));
  42     doc.documentElement.appendChild(doc.createElement('body'));
  43     return doc;
  44   }
  45
  46   // test 46: media queries
  47   var doc = getTestDocument();
  48   var style = doc.createElement('style');
  49   style.setAttribute('type', 'text/css');
  50   style.appendChild(doc.createTextNode('@media all and (min-color: 0) { #a { text-transform: uppercase; } }'));                         // matches
  51   style.appendChild(doc.createTextNode('@media not all and (min-color: 0) { #b { text-transform: uppercase; } }'));
  52   style.appendChild(doc.createTextNode('@media only all and (min-color: 0) { #c { text-transform: uppercase; } }'));                    // matches
  53   style.appendChild(doc.createTextNode('@media (bogus) { #d { text-transform: uppercase; } }'));
  54   style.appendChild(doc.createTextNode('@media all and (bogus) { #e { text-transform: uppercase; } }'));
  55   style.appendChild(doc.createTextNode('@media not all and (bogus) { #f { text-transform: uppercase; } }'));                            // matches
  56   style.appendChild(doc.createTextNode('@media only all and (bogus) { #g { text-transform: uppercase; } }'));
  57   style.appendChild(doc.createTextNode('@media (bogus), all { #h { text-transform: uppercase; } }'));                                   // matches
  58   style.appendChild(doc.createTextNode('@media all and (bogus), all { #i { text-transform: uppercase; } }'));                           // matches
  59   style.appendChild(doc.createTextNode('@media not all and (bogus), all { #j { text-transform: uppercase; } }'));                       // matches
  60   style.appendChild(doc.createTextNode('@media only all and (bogus), all { #k { text-transform: uppercase; } }'));                      // matches
  61   style.appendChild(doc.createTextNode('@media all, (bogus) { #l { text-transform: uppercase; } }'));                                   // matches
  62   style.appendChild(doc.createTextNode('@media all, all and (bogus) { #m { text-transform: uppercase; } }'));                           // matches
  63   style.appendChild(doc.createTextNode('@media all, not all and (bogus) { #n { text-transform: uppercase; } }'));                       // matches
  64   style.appendChild(doc.createTextNode('@media all, only all and (bogus) { #o { text-transform: uppercase; } }'));                      // matches
  65   style.appendChild(doc.createTextNode('@media all and color { #p { text-transform: uppercase; } }'));
  66   style.appendChild(doc.createTextNode('@media all and min-color: 0 { #q { text-transform: uppercase; } }'));
  67   style.appendChild(doc.createTextNode('@media all, all and color { #r { text-transform: uppercase; } }'));
  68   style.appendChild(doc.createTextNode('@media all, all and min-color: 0 { #s { text-transform: uppercase; } }'));
  69   style.appendChild(doc.createTextNode('@media all and min-color: 0, all { #t { text-transform: uppercase; } }'));
  70   style.appendChild(doc.createTextNode('@media (max-color: 0) and (max-monochrome: 0) { #u { text-transform: uppercase; } }'));
  71   style.appendChild(doc.createTextNode('@media (min-color: 1), (min-monochrome: 1) { #v { text-transform: uppercase; } }'));            // matches
  72   style.appendChild(doc.createTextNode('@media all and (min-color: 0) and (min-monochrome: 0) { #w { text-transform: uppercase; } }')); // matches
  73   style.appendChild(doc.createTextNode('@media not all and (min-color: 1), not all and (min-monochrome: 1) { #x { text-transform: uppercase; } }')); // matches
  74   style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (min-width: 1em) { #y1 { text-transform: uppercase; } }'));
  75   style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (min-width: 1em) { #y2 { text-transform: uppercase; } }'));
  76   style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (max-width: 1em) { #y3 { text-transform: uppercase; } }'));
  77   style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (max-width: 1em) { #y4 { text-transform: uppercase; } }')); // matches
  78   doc.getElementsByTagName('head')[0].appendChild(style);
  79   var names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y1', 'y2', 'y3', 'y4'];
  80   for (var i in names) {
  81         let p = doc.createElement('p');
  82         p.id = names[i];
  83         doc.body.appendChild(p);
  84   }
  85   var count = 0;
  86   var check = function (c, e) {
  87         count += 1;
  88         let p = doc.getElementById(c);
  89         is(doc.defaultView.getComputedStyle(p).textTransform, e ? 'uppercase' : 'none', "case " + c + " failed (index " + count + ")");
  90   }
  91   check('a', true); // 1
  92   check('b', false);
  93   check('c', true);
  94   check('d', false);
  95   check('e', false);
  96   check('f', false); // true in old spec; commented out in real Acid3
  97   check('g', false);
  98   check('h', true);
  99   check('i', true);
 100   check('j', true); // 10
 101   check('k', true);
 102   check('l', true);
 103   check('m', true);
 104   check('n', true);
 105   check('o', true);
 106   check('p', false);
 107   check('q', false);
 108   check('r', true); // false in old spec
 109   check('s', true); // false in old spec
 110   check('t', true); // 20 - false in old spec
 111   check('u', false);
 112   check('v', true);
 113   check('w', true);
 114   check('x', true);
 115   // here the viewport is 0x0
 116   check('y1', false); // 25
 117   check('y2', false);
 118   check('y3', false);
 119   check('y4', true);
 120   document.getElementById("selectors").setAttribute("style", "height: 100px; width: 100px");
 121   // now the viewport is more than 1em by 1em
 122   check('y1', true); // 29
 123   check('y2', false);
 124   check('y3', false);
 125   check('y4', false);
 126   document.getElementById("selectors").removeAttribute("style");
 127   // here the viewport is 0x0 again
 128   check('y1', false); // 33
 129   check('y2', false);
 130   check('y3', false);
 131   check('y4', true);
 132   SimpleTest.finish();
 133 }
 134 </script>
 135 </pre>
 136 <p id="display">
 137   <iframe src="empty.html" id="selectors" onload="runTest()"></iframe>
 138 </p>
 139 </body>
 140 </html>