third_party/WebKit/LayoutTests/media/video-controls-overlay-play-button.html - Issue 2121613002: Convert video-controls-[captions, overlay, track]* tests to testharness.js

Side by Side Diff: third_party/WebKit/LayoutTests/media/video-controls-overlay-play-button.html

Issue 2121613002: Convert video-controls-[captions, overlay, track]* tests to testharness.js (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: address philip's comments Created 4 years, 5 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

« third_party/WebKit/LayoutTests/media/video-controls-captions-on-off.html ('K') | « third_party/WebKit/LayoutTests/media/video-controls-captions-on-off-expected.txt ('k') | third_party/WebKit/LayoutTests/media/video-controls-overlay-play-button-expected.txt » ('j') | third_party/WebKit/LayoutTests/media/video-controls-track-selection-menu.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!doctype html>	1 <!DOCTYPE html>

2 <html>	2 <title>Test that the overlay play button respects the controls attribute.</title >

3 <head>	3 <script src="../resources/testharness.js"></script>

4 <title>Test that the overlay play button respects the controls attribute </title>	4 <script src="../resources/testharnessreport.js"></script>

5 <script src="media-controls.js"></script>	5 <script src="media-file.js"></script>

6 <script src="media-file.js"></script>	6 <script src="media-controls.js"></script>

7 <!-- TODO(foolip): Convert test to testharness.js. crbug.com/588956	7 <script>

8 (Please avoid writing new tests using video-test.js) -->	8 async_test(function(t) {

9 <script src="video-test.js"></script>	9 internals.settings.setMediaControlsOverlayPlayButtonEnabled(true);

10 <script>

11 function start()

12 {

13 window.internals.settings.setMediaControlsOverlayPlayButtonEnabl ed(true);

14	10

15 // Add element dynamically, since otherwise the controls are cre ated, but	11 // Add video dynamically, since otherwise the controls are created, but

16 // hidden, before the setting is set, causing the setting to be ignored.	12 // hidden, before the setting is set, causing the setting to be ignored.

17 addVideoElement();	13 var video = document.createElement("video");

	14 document.documentElement.appendChild(video);
	foolip 2016/07/06 10:00:47 That's a weird place to have the video element, ca That's a weird place to have the video element, can you put it in document.body assuming this isn't intended to test something funny? Srirama 2016/07/06 11:35:49 To append to body, we need a body tag in the test, Show quoted text On 2016/07/06 10:00:47, Philip Jägenstedt wrote: > That's a weird place to have the video element, can you put it in document.body > assuming this isn't intended to test something funny? To append to body, we need a body tag in the test, so added body tag as well.
18	15

19 findMediaElement();	16 video.controls = true;

	17 var button = mediaControlsButton(video, "overlay-play-button")

	18 assert_equals(getComputedStyle(button).display, "flex");

20	19

21 video.controls = true;	20 video.onloadeddata = t.step_func(function() {

	21 video.onloadeddata = null;
	foolip 2016/07/06 10:00:47 The structure of this test is honestly quite hard The structure of this test is honestly quite hard to follow, can you try using EventWatcher like in LayoutTests/media/autoplay-muted.html? You might try using that in other places where I suggested following another style as well. Srirama 2016/07/06 10:53:18 I'm afraid i understood how we can apply eventwatc Show quoted text On 2016/07/06 10:00:47, Philip Jägenstedt wrote: > The structure of this test is honestly quite hard to follow, can you try using > EventWatcher like in LayoutTests/media/autoplay-muted.html? You might try using > that in other places where I suggested following another style as well. I'm afraid i understood how we can apply eventwatcher here. Just had a look at the eventwatcher interface, and it is good to test a series of events but how can we execute a specific function on each event, like this current test case? Or do you want me to use multiple eventwatchers? foolip 2016/07/06 11:09:18 I haven't done it myself, but https://github.com/w Show quoted text On 2016/07/06 10:53:18, Srirama wrote: > On 2016/07/06 10:00:47, Philip Jägenstedt wrote: > > The structure of this test is honestly quite hard to follow, can you try using > > EventWatcher like in LayoutTests/media/autoplay-muted.html? You might try > using > > that in other places where I suggested following another style as well. > > I'm afraid i understood how we can apply eventwatcher here. Just had a look at > the eventwatcher interface, and it is good to test a series of events but how > can we execute a specific function on each event, like this current test case? > Or do you want me to use multiple eventwatchers? I haven't done it myself, but https://github.com/w3c/web-platform-tests/blob/master/html/semantics/embedded... looks like an OK example. So maybe something like this: var video = document.createElement("video"); video.controls = true; var button = mediaControlsButton(video, "overlay-play-button"); assert_equals(getComputedStyle(button).display, "flex"); var watcher = new EventWatcher(t, video, ['loadeddata', 'play', 'pause']); video.src = findMediaFile("video", "content/test"); watcher.wait_for('loadeddata').then(t.step_func(function() { video.play(); return watcher.wait_for('play'); }).then(t.step_func(function() { assert_equals(getComputedStyle(button).display, "none"); video.pause(); return watcher.wait_for('pause'); }).... And so on. fs 2016/07/06 11:11:52 I think the mechanism for that is something like: Show quoted text On 2016/07/06 at 10:53:18, Srirama wrote: > On 2016/07/06 10:00:47, Philip Jägenstedt wrote: > > The structure of this test is honestly quite hard to follow, can you try using > > EventWatcher like in LayoutTests/media/autoplay-muted.html? You might try using > > that in other places where I suggested following another style as well. > > I'm afraid i understood how we can apply eventwatcher here. Just had a look at the eventwatcher interface, and it is good to test a series of events but how can we execute a specific function on each event, like this current test case? Or do you want me to use multiple eventwatchers? I think the mechanism for that is something like: var watcher = new EventWatcher(...); watcher.wait_for(something).then(function() { // got something }); Srirama 2016/07/06 11:35:49 Done. Thanks @both for the info. Show quoted text On 2016/07/06 11:11:52, fs wrote: > On 2016/07/06 at 10:53:18, Srirama wrote: > > On 2016/07/06 10:00:47, Philip Jägenstedt wrote: > > > The structure of this test is honestly quite hard to follow, can you try > using > > > EventWatcher like in LayoutTests/media/autoplay-muted.html? You might try > using > > > that in other places where I suggested following another style as well. > > > > I'm afraid i understood how we can apply eventwatcher here. Just had a look at > the eventwatcher interface, and it is good to test a series of events but how > can we execute a specific function on each event, like this current test case? > Or do you want me to use multiple eventwatchers? > > I think the mechanism for that is something like: > > var watcher = new EventWatcher(...); > watcher.wait_for(something).then(function() { > // got something > }); Done. Thanks @both for the info.
22	22

23 button = mediaControlsButton(video, 'overlay-play-button')	23 video.onplay = t.step_func(function() {

24 testExpected('getComputedStyle(button).display', 'flex');	24 play(pause1);

	25 });

25	26

26 waitForEventOnce('loadeddata', loadeddata);	27 video.play();

27 video.src = findMediaFile('video', 'content/test');	28 });

28 }

29	29

30 function addVideoElement() {	30 function play(pauseFunction) {

31 element = document.createElement('video');	31 video.onplay = null;

32 document.body.appendChild(element);	32 assert_equals(getComputedStyle(button).display, "none");

33 }

34	33

35 function loadeddata()	34 video.onpause = t.step_func(pauseFunction);

36 {	35 video.pause();

37 waitForEventOnce('play', play1);	36 }

38 run('video.play()');

39 }

40	37

41 function play1()	38 function pause1() {

42 {	39 video.onpause = null;

43 testExpected('getComputedStyle(button).display', 'none');	40 assert_equals(getComputedStyle(button).display, "flex");

44	41

45 waitForEventOnce('pause', pause1);	42 video.controls = false;

46 run('video.pause()');	43 assert_equals(getComputedStyle(button).display, "none");

47 }

48	44

49 function pause1()	45 video.onplay = t.step_func_done(function() {

50 {	46 play(pause2);

51 testExpected('getComputedStyle(button).display', 'flex');	47 });

52	48

53 video.controls = false;	49 video.play();

54 testExpected('getComputedStyle(button).display', 'none');	50 }

55	51

56 waitForEventOnce('play', play2);	52 function pause2() {

57 run('video.play()');	53 video.onpause = null;

58 }	54 assert_equals(getComputedStyle(button).display, "none");

59	55

60 function play2()	56 video.controls = true;

61 {	57 assert_equals(getComputedStyle(button).display, "flex");

62 testExpected('getComputedStyle(button).display', 'none');	58 }

63	59

64 waitForEventOnce('pause', pause2);	60 video.src = findMediaFile("video", "content/test");

65 run('video.pause()');	61 });

66 }	62 </script>

67

68 function pause2()

69 {

70 testExpected('getComputedStyle(button).display', 'none');

71

72 video.controls = true;

73 testExpected('getComputedStyle(button).display', 'flex');

74

75 endTest();

76 }

77 </script>

78 </head>

79 <body onload="start()">

80 <p>Test that the overlay play button respects the controls attribute</p>

81 </body>

82 </html>

OLD	NEW