Bug 16796 – Acid3 failure due to media queries

• Component: CSS
• Status: RESOLVED FIXED

[Eric Seidel (no email)]

Test 46: FAIL (expected none, got: uppercase - case e failed)

    function () {
      // test 46: media queries
      var doc = getTestDocument();
      var style = doc.createElement('style');
      style.setAttribute('type', 'text/css');
      style.appendChild(doc.createTextNode('@media all and (min-color: 0) { #a { text-transform: uppercase; } }'));                         // matches
      style.appendChild(doc.createTextNode('@media not all and (min-color: 0) { #b { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media only all and (min-color: 0) { #c { text-transform: uppercase; } }'));                    // matches
      style.appendChild(doc.createTextNode('@media all and (bogus) { #d { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media not all and (bogus) { #e { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media only all and (bogus) { #f { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media all and color { #g { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media all and min-color: 0 { #h { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media all, all and color { #i { text-transform: uppercase; } }'));                             // matches
      style.appendChild(doc.createTextNode('@media all, all and min-color: 0 { #j { text-transform: uppercase; } }'));                      // matches
      style.appendChild(doc.createTextNode('@media all and min-color: 0, all { #k { text-transform: uppercase; } }'));                      // matches
      style.appendChild(doc.createTextNode('@media (min-color: 0) and (min-monochrome: 0) { #l { text-transform: uppercase; } }'));         // matches
      // the next four assume that the window is bigger than 1em by 1em at the time the test is run
      style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (min-width: 1em) { #m { text-transform: uppercase; } }')); // matches
      style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (min-width: 1em) { #n { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (max-width: 1em) { #o { text-transform: uppercase; } }'));
      style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (max-width: 1em) { #p { text-transform: uppercase; } }'));
      doc.getElementsByTagName('head')[0].appendChild(style);
      var names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p'];
      for (var i in names) {
        var p = doc.createElement('p');
        p.id = names[i];
        doc.body.appendChild(p);
      }
      var check = function (c, e) {
        var p = doc.getElementById(c);
        assertEquals(doc.defaultView.getComputedStyle(p, '').textTransform, e ? 'uppercase' : 'none', "case " + c + " failed");
      }
      check('a', true);
      check('b', false);
      check('c', true);
      check('d', false);
      check('e', false);
      check('f', false);
      check('g', false);
      check('h', false);
      check('i', true);
      check('j', true);
      check('k', true);
      check('l', true);
      check('m', true);
      check('n', false);
      check('o', false);
      check('p', false);
      return 3;
    },

[Eric Seidel (no email)]

Looking at this.

[Eric Seidel (no email)]

It looks like these ones are all invalid CSS:
style.appendChild(doc.createTextNode('@media all, all and color { #i { text-transform: uppercase; } }'));                             // matches
style.appendChild(doc.createTextNode('@media all, all and min-color: 0 { #j { text-transform: uppercase; } }'));                      // matches
style.appendChild(doc.createTextNode('@media all and min-color: 0, all { #k { text-transform: uppercase; } }'));                      // matches

They're missing (), when changed to:

style.appendChild(doc.createTextNode('@media all, all and (color) { #i { text-transform: uppercase; } }'));                             // matches
style.appendChild(doc.createTextNode('@media all, all and (min-color: 0) { #j { text-transform: uppercase; } }'));                      // matches
style.appendChild(doc.createTextNode('@media all and (min-color: 0), all { #k { text-transform: uppercase; } }'));                      // matches

They work in Safari.

[Eric Seidel (no email)]

Looks like test 'e' is also wrong:

The comma expresses a logical OR, while the "and" keyword expresses a logical AND. There is also a logical NOT in the syntax:
<link rel="stylesheet" media="not screen and (color)" 
  href="http://www.example.com/color" />
The presence of the keyword "not" at the beginning of the query will negate the result. I.e., if the Media Query had been true without the "not" keyword it will become false, and vice versa. User agents that only support media types (as described in HTML4) will not recognize the "not" keyword and the associated style sheet is therefore not applied.

Thus the 'not' at the beginning of the query applies to the whole query result.  all (true) and bogus (false) == false (not)-> true.  Thus 'e' should match.

[Eric Seidel (no email)]

The last failure is due to bug 16832.  I'll see if I can't fix bug 16832 while we wait for Ian's reply. :)

[Eric Seidel (no email)]

And the last one falls...

Looks like:
style.appendChild(doc.createTextNode('@media (min-color: 0) and (min-monochrome: 0) { #l { text-transform: uppercase; } }'));         // matches

is an invalid test too.  According to the spec:

The "monochrome" media feature describes the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the output device value will be 0. For example, here are two ways to express that a style sheet applies to all monochrome devices:
@media all and (monochrome) { ... }
@media all and (min-monochrome: 1) { ... }
For example, express that a style sheet applies to monochrome devices with more than 2 bits per pixels:
@media all and (min-monochrome: 2) { ... }


I would interpret "min-monochrome: 0" to mean "a monochrome device with at least 0 bits of color data per pixel".  Since a device should never be both color and monochrome, the query will always be false.

Thus, I think we can close this bug as INVALID, since I now believe each case was actually an error in the Acid3 test.  I'm certain there are issues with our @media support, but these are not they. :)

[Ian 'Hixie' Hickson]

My interpretation was that syntax errors would just cause that part of the media query to be ignored, and not the rest of it. I'll investigate further.

[Ian 'Hixie' Hickson]

I have investigated further and fixed the test. There are now 26 subsubtests in that subtest of the test.

[Eric Seidel (no email)]

After a few more rounds of back and forth, the test was fixed and WebKit now passes the @media subtest w/ no code changes! :)