Skip to content

Commit 7ac9383

Browse files
meyerwebmeyerweb
committed
Added several new tests sprining from TDG5e
1 parent 12986c2 commit 7ac9383

12 files changed

+101
-0
lines changed

‎cue-pseudo.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>::cue() Pseudo-Element</title><style type="text/css">::cue { color: yellow;}::cue(v[voice="Hildy"]) { color: red;}::cue(*:nth-child(even)) { color: #CCF;}::cue(v[voice="Hildy"]) {font-weight: bold;}::cue(:nth-child(odd)) {color: yellow;}::cue(:nth-child(even)) {color: white;}</style></head><body id="www-meyerweb-com" class="css"><video controls src="cues/friday.mp4"> <track default kind="captions" srclang="en" src="cues/friday.vtt"> Sorry, your browser doesn't support embedded videos.</video></body></html>

‎cues/friday.mp4‎

503 KB
Binary file not shown.

‎cues/friday.vtt‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
WEBVTT
2+
3+
00:00:00.000 --> 00:00:00.999 line:80%
4+
<i>Hildy!</i>
5+
6+
00:00:01.000 --> 00:00:01.499 line:80%
7+
<v Hildy>How are you?</v>
8+
9+
00:00:01.500 --> 00:00:02.999 line:80%
10+
<v Hildy>Tell me, is the lord of the universe in?</v>
11+
12+
00:00:03.000 --> 00:00:04.299 line:80%
13+
<c.first>- Yes, he's in.</c>
14+
<c.second>- In a bad humor.</c>
15+
16+
00:00:04.300 --> 00:00:06.000 line:80%
17+
Somebody must’ve stolen the crown jewels.

‎fullscreen.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>:fullscreen Pseudo-Class</title><style type="text/css">:fullscreen body {background-color: #FEE;}h1:fullscreen {font-size: 20vh;}#fs-toggle:not(:fullscreen) { background-color: #afa;}#fs-toggle:fullscreen { background-color: #faa;}</style></head><body id="www-meyerweb-com" class="css"><h1>How big am I? What color?</h1><p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using CSS.</p><button id="fs-toggle">Toggle Fullscreen</button></body></html>

‎nth-child-negative.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>Negative :nth-child()</title>
6+
<link rel="stylesheet" href="c/style-insert-tests.css" type="text/css" />
7+
<style type="text/css" id="tests" contenteditable>
8+
li:nth-child(-n + 10) {font-weight: bold;}
9+
</style>
10+
</head>
11+
<body>
12+
13+
<ol>
14+
<li>List item</li>
15+
<li>List item</li>
16+
<li>List item</li>
17+
<li>List item</li>
18+
<li>List item</li>
19+
<li>List item</li>
20+
<li>List item</li>
21+
<li>List item</li>
22+
<li>List item</li>
23+
<li>List item</li>
24+
<li>List item</li>
25+
<li>List item</li>
26+
<li>List item</li>
27+
<li>List item</li>
28+
<li>List item</li>
29+
<li>List item</li>
30+
<li>List item</li>
31+
<li>List item</li>
32+
<li>List item</li>
33+
<li>List item</li>
34+
</ol>
35+
36+
37+
</body>
38+
</html>

‎nth-child-of-selector.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>Negative :nth-child()</title>
6+
<link rel="stylesheet" href="c/style-insert-tests.css" type="text/css" />
7+
<style type="text/css" id="tests" contenteditable>
8+
li:nth-child(2n + 1 of li) {font-weight: bold;}
9+
</style>
10+
</head>
11+
<body>
12+
13+
<ol>
14+
<li>List item</li>
15+
<li>List item</li>
16+
<li>List item</li>
17+
<li>List item</li>
18+
<li>List item</li>
19+
<li>List item</li>
20+
<li>List item</li>
21+
<li>List item</li>
22+
<li>List item</li>
23+
<li>List item</li>
24+
<li>List item</li>
25+
<li>List item</li>
26+
<li>List item</li>
27+
<li>List item</li>
28+
<li>List item</li>
29+
<li>List item</li>
30+
<li>List item</li>
31+
<li>List item</li>
32+
<li>List item</li>
33+
<li>List item</li>
34+
</ol>
35+
36+
37+
</body>
38+
</html>

‎pseudo-element-file-selector-button.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Pseudo-Element Specificity</title><style type="text/css">form {width: 27em; padding: 1em;}#uploadField::file-selector-button { border: thick solid gray; border-radius: 2em;}hr {opacity: 0.0001;}</style></head><body id="www-meyerweb-com" class="css"><form><label for="uploadField0">Select file from computer</label><input id="uploadField0" type="file"><hr><label for="uploadField">Select file from computer</label><input id="uploadField" type="file"></form></body></html>

‎pseudo-element-placeholder.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Pseudo-Element Specificity</title><style type="text/css">::placeholder {color: green;}</style></head><body id="www-meyerweb-com" class="css"><form><input type="text" placeholder="This is placeholder text"><input type="text" value="This is value text"><input type="text" placeholder="This is placeholder text" value="This is value text"><hr><textarea placeholder="This is placeholder text."></textarea><textarea>This is pre-filled text.</textarea><textarea placeholder="This is placeholder text.">This is pre-filled text.</textarea></form></body></html>

‎root-relative-units.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Root-relative units</title><style type="text/css">html { font-size: 40px; line-height: 80px;}table { font-size: 0.5em; line-height: 1em;}tbody tr td img {width: 2px;}tbody tr#em-rem td:nth-of-type(1) img {width: 1em;}tbody tr#em-rem td:nth-of-type(2) img {width: 1rem;}tbody tr#ex-rex td:nth-of-type(1) img {width: 1ex;}tbody tr#ex-rex td:nth-of-type(2) img {width: 1rex;}tbody tr#ch-rch td:nth-of-type(1) img {width: 1ch;}tbody tr#ch-rch td:nth-of-type(2) img {width: 1rch;}tbody tr#cap-rcap td:nth-of-type(1) img {width: 1cap;}tbody tr#cap-rcap td:nth-of-type(2) img {width: 1rcap;}tbody tr#ic-ric td:nth-of-type(1) img {width: 1ic}tbody tr#ic-ric td:nth-of-type(2) img {width: 1ric;}tbody tr#lh-rlh td:nth-of-type(1) img {width: 1lh;}tbody tr#lh-rlh td:nth-of-type(2) img {width: 1rlh;}</style></head><body id="www-meyerweb-com" class="css"><table><thead><tr><th>Tested</th><th>Element-relative</th><th>Root-relative</th></tr></thead><tbody><tr id="em-rem"><th>Computed `font-size`</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="ex-rex"><th>Computed x-height</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="ch-rch"><th>Width of the `0` character</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="cap-rcap"><th>Height of a Roman capital letter</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="ic-ric"><th>Width of the 水 ideograph</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="lh-rlh"><th>Computed `line-height` </th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr></tbody></table></body></html>

‎val-q.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>q</title><style type="text/css">img:nth-of-type(1) {width: 40q;}img:nth-of-type(2) {width: 10mm;}</style></head><body id="www-meyerweb-com" class="css"><p>The following two images should be the same size.</p><img src="i/redbox.gif"><img src="i/redbox.gif"></body></html>

0 commit comments

Comments
 (0)