Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(793)

Side by Side Diff: third_party/WebKit/LayoutTests/media/track/cue-style-invalidation.html

Issue 1856383002: Convert css cue track tests from video-test.js to testharness.js based (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Address review comments Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <title>Check that descendant style invalidation works with ::cue selectors.</tit le>
2 <script src="../media-file.js"></script> 3 <script src="../media-file.js"></script>
3 <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956
4 (Please avoid writing new tests using video-test.js) -->
5 <script src="../video-test.js"></script>
6 <script src="../media-controls.js"></script> 4 <script src="../media-controls.js"></script>
5 <script src="../../resources/testharness.js"></script>
6 <script src="../../resources/testharnessreport.js"></script>
7 <style> 7 <style>
8 video::cue, 8 video::cue,
9 video::cue(c), 9 video::cue(c),
10 video::cue(i:past), 10 video::cue(i:past),
11 video::cue(.b:future) { background-color: red } 11 video::cue(.b:future) { background-color: red }
12 12
13 .cue video::cue, 13 .cue video::cue,
14 .cuefunc video::cue(c), 14 .cuefunc video::cue(c),
15 .past video::cue(i:past), 15 .past video::cue(i:past),
16 .future video::cue(.b:future) { background-color: green } 16 .future video::cue(.b:future) { background-color: green }
17
18 // This selector would have triggered sibling subtree recalc if we didn't
19 // support descendant invalidation for ::cue/::cue().
20 #ascendant + div { color: pink }
21 </style> 17 </style>
22 <script>
23 function seeked() {
24 var red = "rgb(255, 0, 0)";
25 var green = "rgb(0, 128, 0)";
26
27 cueNode = textTrackDisplayElement(video, "cue");
28 iNode = cueNode.firstElementChild;
29 cNode = iNode.nextSibling.nextSibling;
30 bNode = cNode.nextSibling.nextSibling;
31
32 testExpected("getComputedStyle(cueNode).backgroundColor", red);
33 ascendant.offsetTop;
34 ascendant.classList.add("cue");
35 if (window.internals)
36 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 8);
37 testExpected("getComputedStyle(cueNode).backgroundColor", green);
38
39 testExpected("getComputedStyle(cNode).backgroundColor", red);
40 ascendant.offsetTop;
41 ascendant.classList.add("cuefunc");
42 if (window.internals)
43 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 1);
44 testExpected("getComputedStyle(cNode).backgroundColor", green);
45
46 testExpected("getComputedStyle(iNode).backgroundColor", red);
47 ascendant.offsetTop;
48 ascendant.classList.add("past");
49 if (window.internals)
50 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 1);
51 testExpected("getComputedStyle(iNode).backgroundColor", green);
52
53 testExpected("getComputedStyle(bNode).backgroundColor", red);
54 ascendant.offsetTop;
55 ascendant.classList.add("future");
56 if (window.internals)
57 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 1);
58 testExpected("getComputedStyle(bNode).backgroundColor", green);
59
60 endTest();
61 }
62
63 window.onload = function() {
64 consoleWrite("Check that descendant style invalidation works with ::cue sele ctors.");
65 findMediaElement();
66 video.src = findMediaFile("video", "../content/test");
67 waitForEvent("seeked", seeked);
68 waitForEvent("canplaythrough", function() { video.currentTime = 0.1; });
69 };
70 </script>
71 <div id="ascendant"> 18 <div id="ascendant">
72 <video> 19 <video>
73 <track src="captions-webvtt/invalidation.vtt" kind="captions" default> 20 <track src="captions-webvtt/invalidation.vtt" kind="captions" default>
74 </video> 21 </video>
75 <div></div>
76 <div></div>
77 </div> 22 </div>
78 <div> 23 <script>
79 <div></div> 24 async_test(function(t) {
80 </div> 25 var video = document.querySelector('video');
26 video.src = findMediaFile("video", "../content/test");
27 video.onseeked = t.step_func_done(function() {
28 var red = "rgb(255, 0, 0)";
29 var green = "rgb(0, 128, 0)";
30
31 var cueNode = textTrackDisplayElement(video, "cue");
32 var iNode = cueNode.firstElementChild;
33 var cNode = iNode.nextSibling.nextSibling;
34 var bNode = cNode.nextSibling.nextSibling;
35
36 assert_equals(getComputedStyle(cueNode).backgroundColor, red);
37 ascendant.offsetTop;
38 ascendant.classList.add("cue");
39 if (window.internals)
40 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8);
41 assert_equals(getComputedStyle(cueNode).backgroundColor, green);
42
43 assert_equals(getComputedStyle(cNode).backgroundColor, red);
44 ascendant.offsetTop;
45 ascendant.classList.add("cuefunc");
46 if (window.internals)
47 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);
48 assert_equals(getComputedStyle(cNode).backgroundColor, green);
49
50 assert_equals(getComputedStyle(iNode).backgroundColor, red);
51 ascendant.offsetTop;
52 ascendant.classList.add("past");
53 if (window.internals)
54 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);
55 assert_equals(getComputedStyle(iNode).backgroundColor, green);
56
57 assert_equals(getComputedStyle(bNode).backgroundColor, red);
58 ascendant.offsetTop;
59 ascendant.classList.add("future");
60 if (window.internals)
61 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);
62 assert_equals(getComputedStyle(bNode).backgroundColor, green);
63 });
64 video.currentTime = 0.1;
65 });
66 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698