16796 2008-01-09 00:16:25 -0800 Acid3 failure due to media queries 2008-01-14 01:01:12 -0800 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Mac OS X 10.4 RESOLVED FIXED P2 Normal --- 1 eric eric ian oldest_to_newest 66639 0 eric 2008-01-09 00:16:25 -0800 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; }, 66845 1 eric 2008-01-10 16:52:39 -0800 Looking at this. 66857 2 eric 2008-01-10 18:56:51 -0800 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. 66860 3 eric 2008-01-10 19:21:03 -0800 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. 66861 4 eric 2008-01-10 19:22:40 -0800 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. :) 66864 5 eric 2008-01-10 19:48:49 -0800 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. :) 66866 6 ian 2008-01-10 20:06:27 -0800 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. 67091 7 ian 2008-01-12 22:35:46 -0800 I have investigated further and fixed the test. There are now 26 subsubtests in that subtest of the test. 67195 8 eric 2008-01-14 01:01:12 -0800 After a few more rounds of back and forth, the test was fixed and WebKit now passes the @media subtest w/ no code changes! :)