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

Side by Side Diff: third_party/WebKit/LayoutTests/external/wpt/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html

Issue 2695813009: Import wpt@503f5b5f78ec4e87d144f78609f363f0ed0ea8db (Closed)
Patch Set: Skip some tests Created 3 years, 10 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>Reference for WebVTT rendering, repositioning of 9 cues that overlap comp letely</title> 2 <title>Reference for WebVTT rendering, repositioning of 9 cues that overlap comp letely</title>
3 <style> 3 <style>
4 .video { 4 .video {
5 display: inline-block; 5 display: inline-block;
6 width: 720px; 6 width: 180px;
7 height: 720px; 7 height: 180px;
8 outline: solid; 8 outline: solid;
9 position: relative 9 position: relative;
10 font-size: 9px
10 } 11 }
11 #cue1 { 12 #cue1 {
12 position: absolute; 13 position: absolute;
13 top: 50%; 14 top: 50%;
14 left: 50%; 15 left: 50%;
15 right: 0; 16 right: 0;
16 margin-top: -18px; 17 margin-top: -4.5px;
17 margin-left: -18px; 18 margin-left: -4.5px;
18 color: #000 19 color: #000
19 } 20 }
20 #cue2 { 21 #cue2 {
21 position: absolute; 22 position: absolute;
22 top: 50%; 23 top: 50%;
23 left: 50%; 24 left: 50%;
24 right: 0; 25 right: 0;
25 margin-top: -54px; 26 margin-top: -13.5px;
26 margin-left: -18px; 27 margin-left: -4.5px;
27 color: #222 28 color: #222
28 } 29 }
29 #cue3 { 30 #cue3 {
30 position: absolute; 31 position: absolute;
31 top: 50%; 32 top: 50%;
32 left: 50%; 33 left: 50%;
33 right: 0; 34 right: 0;
34 margin-top: -18px; 35 margin-top: -4.5px;
35 margin-left: -54px; 36 margin-left: -13.5px;
36 color: #444 37 color: #444
37 } 38 }
38 #cue4 { 39 #cue4 {
39 position: absolute; 40 position: absolute;
40 top: 50%; 41 top: 50%;
41 left: 50%; 42 left: 50%;
42 right: 0; 43 right: 0;
43 margin-top: -18px; 44 margin-top: -4.5px;
44 margin-left: 18px; 45 margin-left: 4.5px;
45 color: #666 46 color: #666
46 } 47 }
47 #cue5 { 48 #cue5 {
48 position: absolute; 49 position: absolute;
49 top: 50%; 50 top: 50%;
50 left: 50%; 51 left: 50%;
51 right: 0; 52 right: 0;
52 margin-top: 18px; 53 margin-top: 4.5px;
53 margin-left: -18px; 54 margin-left: -4.5px;
54 color: #888 55 color: #888
55 } 56 }
56 #cue6 { 57 #cue6 {
57 position: absolute; 58 position: absolute;
58 top: 50%; 59 top: 50%;
59 left: 50%; 60 left: 50%;
60 right: 0; 61 right: 0;
61 margin-top: -54px; 62 margin-top: -13.5px;
62 margin-left: -54px; 63 margin-left: -13.5px;
63 color: #aaa 64 color: #aaa
64 } 65 }
65 #cue7 { 66 #cue7 {
66 position: absolute; 67 position: absolute;
67 top: 50%; 68 top: 50%;
68 left: 50%; 69 left: 50%;
69 right: 0; 70 right: 0;
70 margin-top: -54px; 71 margin-top: -13.5px;
71 margin-left: 18px; 72 margin-left: 4.5px;
72 color: #ccc 73 color: #ccc
73 } 74 }
74 #cue8 { 75 #cue8 {
75 position: absolute; 76 position: absolute;
76 top: 50%; 77 top: 50%;
77 left: 50%; 78 left: 50%;
78 right: 0; 79 right: 0;
79 margin-top: 18px; 80 margin-top: 4.5px;
80 margin-left: -54px; 81 margin-left: -13.5px;
81 color: #eee 82 color: #eee
82 } 83 }
83 #cue9 { 84 #cue9 {
84 position: absolute; 85 position: absolute;
85 top: 50%; 86 top: 50%;
86 left: 50%; 87 left: 50%;
87 right: 0; 88 right: 0;
88 margin-top: 18px; 89 margin-top: 4.5px;
89 margin-left: 18px; 90 margin-left: 4.5px;
90 color: green 91 color: green
91 } 92 }
92 .cue { 93 .cue {
93 width: 36px; 94 width: 9px;
94 text-align: center 95 text-align: center
95 } 96 }
96 .cue > span { 97 .cue > span {
97 font-family: Ahem, sans-serif; 98 font-family: Ahem, sans-serif;
98 background: rgba(0,0,0,0.8); 99 background: rgba(0,0,0,0.8);
99 font-size: 36px;
100 } 100 }
101 </style> 101 </style>
102 <div class="video"> 102 <div class="video">
103 <span class="cue" id="cue1"><span>1</span></span> 103 <span class="cue" id="cue1"><span>1</span></span>
104 <span class="cue" id="cue2"><span>2</span></span> 104 <span class="cue" id="cue2"><span>2</span></span>
105 <span class="cue" id="cue3"><span>3</span></span> 105 <span class="cue" id="cue3"><span>3</span></span>
106 <span class="cue" id="cue4"><span>4</span></span> 106 <span class="cue" id="cue4"><span>4</span></span>
107 <span class="cue" id="cue5"><span>5</span></span> 107 <span class="cue" id="cue5"><span>5</span></span>
108 <span class="cue" id="cue6"><span>6</span></span> 108 <span class="cue" id="cue6"><span>6</span></span>
109 <span class="cue" id="cue7"><span>7</span></span> 109 <span class="cue" id="cue7"><span>7</span></span>
110 <span class="cue" id="cue8"><span>8</span></span> 110 <span class="cue" id="cue8"><span>8</span></span>
111 <span class="cue" id="cue9"><span>9</span></span> 111 <span class="cue" id="cue9"><span>9</span></span>
112 </div> 112 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698