Implement :past pseudo class for the WebVTT ::cue pseudo element

https://bugs.webkit.org/show_bug.cgi?id=105482

Patch by Dima Gorbik <dgorbik@apple.com> on 2013-01-24
Reviewed by Eric Carlson.

Source/WebCore:

It is good to have a designated pseudo class for this, though same could
be achieved by using a combination of ::cue and ::cue(:future).
Tests also check that nested timestamps work properly.

Test: media/track/track-css-matching-timestamps.html

* css/CSSSelector.cpp:
(WebCore::CSSSelector::pseudoId):
(WebCore::nameToPseudoTypeMap):
(WebCore::CSSSelector::extractPseudoType):
* css/CSSSelector.h:
* css/SelectorChecker.cpp:
(WebCore::SelectorChecker::checkOne):

LayoutTests:

* media/track/captions-webvtt/styling-timestamps.vtt: Added.
* media/track/track-css-matching-timestamps-expected.txt: Added.
* media/track/track-css-matching-timestamps.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@140707 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 09ea6ed0
2013-01-24 Dima Gorbik <dgorbik@apple.com>
Implement :past pseudo class for the WebVTT ::cue pseudo element
https://bugs.webkit.org/show_bug.cgi?id=105482
Reviewed by Eric Carlson.
* media/track/captions-webvtt/styling-timestamps.vtt: Added.
* media/track/track-css-matching-timestamps-expected.txt: Added.
* media/track/track-css-matching-timestamps.html: Added.
2013-01-24 Max Vujovic <mvujovic@adobe.com>
[CSS Filters] CSS opacity property clips filter outsets
WEBVTT
1
00:00.000 --> 00:01.000
<00:00.200><c>One</c><00:00.400><c> two</c><c><00:00.600><c><c> three</c><00:00.800><c> five</c> four</c></c>
Test that cues are being matched properly by :past and :future pseudo classes.
EVENT(canplaythrough)
EVENT(seeked)
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
RUN(video.currentTime = 0.3)
EVENT(seeked)
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
RUN(video.currentTime = 0.5)
EVENT(seeked)
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
RUN(video.currentTime = 0.7)
EVENT(seeked)
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(128, 128, 128)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
RUN(video.currentTime = 0.9)
EVENT(seeked)
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(cueNode).color == 'rgb(0, 255, 0)') OK
END OF TEST
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=../media-file.js></script>
<script src=../video-test.js></script>
<script src=../media-controls.js></script>
<style>
video::cue {color: green}
video::cue(:past) {color: lime}
video::cue(:future) {color: gray}
</style>
<script>
var cueNode;
var seekedCount = 0;
var seekTimes = [0.1, 0.3, 0.5, 0.7, 0.9];
var info = [["rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
["rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(0, 255, 0)"],
["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)"]];
function seeked()
{
if (testEnded)
return;
cueNode = textTrackDisplayElement(video, 'all-nodes').firstElementChild;
testExpected("getComputedStyle(cueNode).color", info[seekedCount][0]);
cueNode = cueNode.nextElementSibling;
testExpected("getComputedStyle(cueNode).color", info[seekedCount][1]);
cueNode = cueNode.nextElementSibling.firstElementChild.firstChild;
testExpected("getComputedStyle(cueNode).color", info[seekedCount][2]);
cueNode = cueNode.nextElementSibling;
testExpected("getComputedStyle(cueNode).color", info[seekedCount][3]);
cueNode = cueNode.parentNode;
testExpected("getComputedStyle(cueNode).color", info[seekedCount][4]);
if (++seekedCount == info.length)
endTest();
else {
consoleWrite("");
run("video.currentTime = " + seekTimes[seekedCount]);
}
}
function loaded()
{
consoleWrite("Test that cues are being matched properly by :past and :future pseudo classes.");
findMediaElement();
video.src = findMediaFile('video', '../content/test');
video.id = "testvideo";
waitForEvent('seeked', seeked);
waitForEvent('canplaythrough', function() { video.currentTime = seekTimes[0]; });
}
</script>
</head>
<body onload="loaded()">
<video controls >
<track src="captions-webvtt/styling-timestamps.vtt" kind="captions" default>
</video>
</body>
</html>
2013-01-24 Dima Gorbik <dgorbik@apple.com>
Implement :past pseudo class for the WebVTT ::cue pseudo element
https://bugs.webkit.org/show_bug.cgi?id=105482
Reviewed by Eric Carlson.
It is good to have a designated pseudo class for this, though same could
be achieved by using a combination of ::cue and ::cue(:future).
Tests also check that nested timestamps work properly.
Test: media/track/track-css-matching-timestamps.html
* css/CSSSelector.cpp:
(WebCore::CSSSelector::pseudoId):
(WebCore::nameToPseudoTypeMap):
(WebCore::CSSSelector::extractPseudoType):
* css/CSSSelector.h:
* css/SelectorChecker.cpp:
(WebCore::SelectorChecker::checkOne):
2013-01-23 Jer Noble <jer.noble@apple.com>
Mac: Avoid using k32BGRAPixelFormat on certain platforms.
......@@ -238,6 +238,7 @@ PseudoId CSSSelector::pseudoId(PseudoType type)
#if ENABLE(VIDEO_TRACK)
case PseudoCue:
case PseudoFutureCue:
case PseudoPastCue:
#endif
#if ENABLE(IFRAME_SEAMLESS)
case PseudoSeamlessDocument:
......@@ -327,6 +328,7 @@ static HashMap<AtomicStringImpl*, CSSSelector::PseudoType>* nameToPseudoTypeMap(
#if ENABLE(VIDEO_TRACK)
DEFINE_STATIC_LOCAL(AtomicString, cue, ("cue(", AtomicString::ConstructFromLiteral));
DEFINE_STATIC_LOCAL(AtomicString, futureCue, ("future", AtomicString::ConstructFromLiteral));
DEFINE_STATIC_LOCAL(AtomicString, pastCue, ("past", AtomicString::ConstructFromLiteral));
#endif
#if ENABLE(IFRAME_SEAMLESS)
DEFINE_STATIC_LOCAL(AtomicString, seamlessDocument, ("-webkit-seamless-document", AtomicString::ConstructFromLiteral));
......@@ -409,6 +411,7 @@ static HashMap<AtomicStringImpl*, CSSSelector::PseudoType>* nameToPseudoTypeMap(
#if ENABLE(VIDEO_TRACK)
nameToPseudoType->set(cue.impl(), CSSSelector::PseudoCue);
nameToPseudoType->set(futureCue.impl(), CSSSelector::PseudoFutureCue);
nameToPseudoType->set(pastCue.impl(), CSSSelector::PseudoPastCue);
#endif
#if ENABLE(IFRAME_SEAMLESS)
nameToPseudoType->set(seamlessDocument.impl(), CSSSelector::PseudoSeamlessDocument);
......@@ -539,6 +542,7 @@ void CSSSelector::extractPseudoType() const
case PseudoOutOfRange:
#if ENABLE(VIDEO_TRACK)
case PseudoFutureCue:
case PseudoPastCue:
#endif
break;
case PseudoFirstPage:
......
......@@ -160,6 +160,7 @@ namespace WebCore {
#if ENABLE(VIDEO_TRACK)
PseudoCue,
PseudoFutureCue,
PseudoPastCue,
#endif
#if ENABLE(IFRAME_SEAMLESS)
PseudoSeamlessDocument
......
......@@ -870,6 +870,8 @@ bool SelectorChecker::checkOne(const SelectorCheckingContext& context, const Sib
#if ENABLE(VIDEO_TRACK)
case CSSSelector::PseudoFutureCue:
return (element->isWebVTTElement() && toWebVTTElement(element)->webVTTNodeType() == WebVTTNodeTypeFuture);
case CSSSelector::PseudoPastCue:
return (element->isWebVTTElement() && toWebVTTElement(element)->webVTTNodeType() == WebVTTNodeTypePast);
#endif
case CSSSelector::PseudoHorizontal:
......
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