Commit 301b3b21 authored by dino@apple.com's avatar dino@apple.com

2009-01-06 Dean Jackson <dino@apple.com>

        Reviewed by Dave Hyatt.

        Extend Media Queries to cover transitions,
        animations, transform-2d and transform-3d
        http://webkit.org/specs/MediaQueriesExtensions.html
        Note that the implementation uses -webkit- prefixes
        even though the spec doesn't have them.
        https://bugs.webkit.org/show_bug.cgi?id=22494

        Tests: fast/media/mq-animation.html
               fast/media/mq-transform-01.html
               fast/media/mq-transform-02.html
               fast/media/mq-transform-03.html
               fast/media/mq-transform-04.html
               fast/media/mq-transition.html

        * css/MediaFeatureNames.h:
        * css/MediaQueryEvaluator.cpp:
        (WebCore::animationMediaFeatureEval):
        (WebCore::transitionMediaFeatureEval):
        (WebCore::transform_2dMediaFeatureEval):
        (WebCore::transform_3dMediaFeatureEval):


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@39663 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 6ffa849c
2009-01-06 Dean Jackson <dino@apple.com>
Reviewed by Dave Hyatt.
Tests for Media Query extensions covering transitions,
animations, transform-2d and transform-3d
http://webkit.org/specs/MediaQueriesExtensions.html
https://bugs.webkit.org/show_bug.cgi?id=22494
* fast/media/mq-animation.html: Added.
* fast/media/mq-transform-01.html: Added.
* fast/media/mq-transform-02.html: Added.
* fast/media/mq-transform-03.html: Added.
* fast/media/mq-transform-04.html: Added.
* fast/media/mq-transition.html: Added.
* platform/mac/fast/media/mq-animation-expected.txt: Added.
* platform/mac/fast/media/mq-transform-01-expected.txt: Added.
* platform/mac/fast/media/mq-transform-02-expected.txt: Added.
* platform/mac/fast/media/mq-transform-03-expected.txt: Added.
* platform/mac/fast/media/mq-transform-04-expected.txt: Added.
* platform/mac/fast/media/mq-transition-expected.txt: Added.
2009-01-06 Justin Garcia <justin.garcia@apple.com>
Reviewed by Oliver Hunt.
......
<html>
<head>
<title>CSS3 media query test: media query testing animation feature.</title>
<link rel="help" href="http://www.webkit.org/specs/MediaQueriesExtensions.html" />
<style type="text/css">
@media (-webkit-animation) {
#a { color: green }
}
@media (-webkit-animation: 1) {
#b { color: green }
}
#c { color: green; }
@media (-webkit-animation: 0) {
#c { color: red }
}
</style>
</head>
<body>
<p id="a">This text should be green if running in a build of WebKit with animations.</p>
<p id="b">This text should be green if running in a build of WebKit with animations.</p>
<p id="c">This text should be green if running in a build of WebKit with animations.</p>
</body>
</html>
<html>
<head>
<title>CSS3 media query test: media query testing transform-2d feature.</title>
<link rel="help" href="http://www.webkit.org/specs/MediaQueriesExtensions.html" />
<style type="text/css">
@media (-webkit-transform-2d) {
p { color: green }
}
</style>
</head>
<body>
<p>This text should be green if running in a build of WebKit with 2d transforms.</p>
</body>
</html>
<html>
<head>
<title>CSS3 media query test: media query testing transform 3d feature.</title>
<link rel="help" href="http://www.webkit.org/specs/MediaQueriesExtensions.html" />
<style type="text/css">
p { color: green }
@media (-webkit-transform-3d) {
p { color: red }
}
</style>
</head>
<body>
<p>This text should be green. If running in a build of WebKit with 3d transforms, it will appear red (and this should not happen while 3d is not supported)</p>
</body>
</html>
<html>
<head>
<title>CSS3 media query test: media query testing transform feature.</title>
<link rel="help" href="http://www.webkit.org/specs/MediaQueriesExtensions.html" />
<style type="text/css">
@media all and (-webkit-transform-2d) and (-webkit-transform-3d: 0) {
p { color: green }
}
</style>
</head>
<body>
<p>This text should be green if running in a build of WebKit with support for 2d but not 3d transforms.</p>
</body>
</html>
<html>
<head>
<title>CSS3 media query test: media query testing transform feature.</title>
<link rel="help" href="http://www.webkit.org/specs/MediaQueriesExtensions.html" />
<style type="text/css">
p { color: green; }
@media all and (-webkit-transform-3d) and (-webkit-transform-2d: 0) {
p { color: red }
}
</style>
</head>
<body>
<p>This text should be green. It tests if 3d transforms are available while 2d transforms are not. This should never be possible.</p>
</body>
</html>
<html>
<head>
<title>CSS3 media query test: media query testing transition feature.</title>
<link rel="help" href="http://www.webkit.org/specs/MediaQueriesExtensions.html" />
<style type="text/css">
@media (-webkit-transition) {
#a { color: green }
}
@media (-webkit-transition: 1) {
#b { color: green }
}
#c { color: green; }
@media (-webkit-transition: 0) {
#c { color: red }
}</style>
</head>
<body>
<p id="a">This text should be green if running in a build of WebKit with transitions.</p>
<p id="b">This text should be green if running in a build of WebKit with transitions.</p>
<p id="c">This text should be green if running in a build of WebKit with transitions.</p>
</body>
</html>
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 467x18
text run at (0,0) width 467: "This text should be green if running in a build of WebKit with animations."
RenderBlock {P} at (0,34) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 467x18
text run at (0,0) width 467: "This text should be green if running in a build of WebKit with animations."
RenderBlock {P} at (0,68) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 467x18
text run at (0,0) width 467: "This text should be green if running in a build of WebKit with animations."
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 485x18
text run at (0,0) width 485: "This text should be green if running in a build of WebKit with 2d transforms."
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x36 [color=#008000]
RenderText {#text} at (0,0) size 778x36
text run at (0,0) width 778: "This text should be green. If running in a build of WebKit with 3d transforms, it will appear red (and this should not happen"
text run at (0,18) width 164: "while 3d is not supported)"
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 626x18
text run at (0,0) width 626: "This text should be green if running in a build of WebKit with support for 2d but not 3d transforms."
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 768x18
text run at (0,0) width 768: "This text should be green. It tests if 3d transforms are available while 2d transforms are not. This should never be possible."
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 463x18
text run at (0,0) width 463: "This text should be green if running in a build of WebKit with transitions."
RenderBlock {P} at (0,34) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 463x18
text run at (0,0) width 463: "This text should be green if running in a build of WebKit with transitions."
RenderBlock {P} at (0,68) size 784x18 [color=#008000]
RenderText {#text} at (0,0) size 463x18
text run at (0,0) width 463: "This text should be green if running in a build of WebKit with transitions."
2009-01-06 Dean Jackson <dino@apple.com>
Reviewed by Dave Hyatt.
Extend Media Queries to cover transitions,
animations, transform-2d and transform-3d
http://webkit.org/specs/MediaQueriesExtensions.html
Note that the implementation uses -webkit- prefixes
even though the spec doesn't have them.
https://bugs.webkit.org/show_bug.cgi?id=22494
Tests: fast/media/mq-animation.html
fast/media/mq-transform-01.html
fast/media/mq-transform-02.html
fast/media/mq-transform-03.html
fast/media/mq-transform-04.html
fast/media/mq-transition.html
* css/MediaFeatureNames.h:
* css/MediaQueryEvaluator.cpp:
(WebCore::animationMediaFeatureEval):
(WebCore::transitionMediaFeatureEval):
(WebCore::transform_2dMediaFeatureEval):
(WebCore::transform_3dMediaFeatureEval):
2009-01-06 Eric Seidel <eric@webkit.org>
Reviewed by Oliver Hunt.
......@@ -53,6 +53,10 @@ namespace WebCore {
macro(min_height, "min-height") \
macro(min_monochrome, "min-monochrome") \
macro(min_width, "min-width") \
macro(transform_2d, "-webkit-transform-2d") \
macro(transform_3d, "-webkit-transform-3d") \
macro(transition, "-webkit-transition") \
macro(animation, "-webkit-animation") \
// end of macro
#ifndef CSS_MEDIAQUERY_NAMES_HIDE_GLOBALS
......
......@@ -388,6 +388,42 @@ static bool max_device_widthMediaFeatureEval(CSSValue* value, RenderStyle* style
return device_widthMediaFeatureEval(value, style, frame, MaxPrefix);
}
static bool animationMediaFeatureEval(CSSValue* value, RenderStyle* style, Frame* frame, MediaFeaturePrefix op)
{
if (value) {
float number;
return numberValue(value, number) && compareValue(1, static_cast<int>(number), op);
}
return true;
}
static bool transitionMediaFeatureEval(CSSValue* value, RenderStyle* style, Frame* frame, MediaFeaturePrefix op)
{
if (value) {
float number;
return numberValue(value, number) && compareValue(1, static_cast<int>(number), op);
}
return true;
}
static bool transform_2dMediaFeatureEval(CSSValue* value, RenderStyle* style, Frame* frame, MediaFeaturePrefix op)
{
if (value) {
float number;
return numberValue(value, number) && compareValue(1, static_cast<int>(number), op);
}
return true;
}
static bool transform_3dMediaFeatureEval(CSSValue* value, RenderStyle* style, Frame* frame, MediaFeaturePrefix op)
{
if (value) {
float number;
return numberValue(value, number) && compareValue(0, static_cast<int>(number), op);
}
return false;
}
static void createFunctionMap()
{
// Create the table.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment