Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
271 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Initial</title> | ||
| <style type="text/css"> | ||
| ol li {border: 1px dotted gray;} | ||
| li::before {content: "[" attr(class) "] <" attr(id) "> ";} | ||
| li[maxlength] { | ||
| width: attr(maxlength em); | ||
| } | ||
| li[data-length] { | ||
| width: attr(data-length px); | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <ol> | ||
| <li class="item">A list item.</li> | ||
| <li class="item" id="li02">A list item.</li> | ||
| <li class="item" maxlength="5">A list item.</li> | ||
| <li class="item" data-length="100">A list item.</li> | ||
| </ol> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="http://www.w3.org/TR/css3-values">Specification</a> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>calc()</title> | ||
| <style type="text/css"> | ||
| ol li {border: 1px dotted gray; background: rgba(255,255,0,0.1);} | ||
| li:nth-child(1) {width: calc(7em + 6em);} | ||
| li:nth-child(2) {width: calc(7em+6em);} | ||
| li:nth-child(3) {width: calc(7em + (1em * 6));} | ||
| li:nth-child(4) {width: calc(7em + 96px);} | ||
| li:nth-child(5) {width: calc(7em + 6);} | ||
| li:nth-child(6) {width: calc(7em + 5s);} | ||
| li:nth-child(7) {width: calc(7em + calc(4em + 2em));} | ||
| li:nth-child(8) {width: calc(7em + (4em + 2em));} | ||
| li:nth-child(9) {width: calc(6.5em * 2);} | ||
| li:nth-child(10) {width: calc(6.5em*2);} | ||
| li:nth-child(11) {width: calc(6.5 * 2em);} | ||
| li:nth-child(12) {width: calc(6.5em * 2em);} | ||
| li:nth-child(13) {width: calc(6.5em * 0);} | ||
| li:nth-child(14) {width: calc(26em / 2);} | ||
| li:nth-child(15) {width: calc(26em/2);} | ||
| li:nth-child(16) {width: calc(26 / 2em);} | ||
| li:nth-child(17) {width: calc(26em / 2em);} | ||
| li:nth-child(18) {width: calc(13em / 0);} | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <ol> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| <li>A list item.</li> | ||
| </ol> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="http://www.w3.org/TR/css3-values">Specification</a> | ||
|
|
||
| </body> | ||
| </html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Image values</title> | ||
| <style type="text/css"> | ||
| body {padding: 5em 1em; margin: 0 3em;} | ||
|
|
||
| p[id] {padding: 1em;} | ||
| p[id]::before {content: "[#" attr(id) "] ";} | ||
| #p1 {background: url(i/yinyang.png) silver no-repeat;} | ||
|
|
||
| #p2 {background: -webkit-image(i/yinyang.png, silver) no-repeat; | ||
| background: -moz-image(i/yinyang.png, silver) no-repeat; | ||
| background: image(i/yinyang.png, silver) no-repeat;} | ||
|
|
||
| #p3 {background: -moz-image-set("i/tester.jpg" 1x, "i/yinyang.png" 2x) no-repeat; | ||
| background: -webkit-image-set("i/tester.jpg" 1x, "i/yinyang.png" 2x) no-repeat; | ||
| background: image-set("i/tester.jpg" 1x, "i/yinyang.png" 2x) no-repeat;} | ||
|
|
||
| #p4 {background: -moz-cross-fade(i/yinyang.png,i/tester.jpg) no-repeat; | ||
| background: -webkit-cross-fade(i/yinyang.png,i/tester.jpg) no-repeat; | ||
| background: cross-fade(i/yinyang.png,i/tester.jpg) no-repeat;} | ||
|
|
||
| #p5 {background: -moz-element(#bg-test) no-repeat; | ||
| background: -webkit-element(#bg-test) no-repeat; | ||
| background: element(#bg-test) no-repeat;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p id="p1">A paragraph.</p> | ||
| <p id="p2">A paragraph.</p> | ||
| <p id="p3">A paragraph.</p> | ||
| <p id="p4">A paragraph.</p> | ||
| <p id="p5">A paragraph.</p> | ||
|
|
||
| <p> | ||
| The following image has an ID of <code>bg-test</code> and may appear in the background of certain tests above. <img src="i/yinyang.png" alt="" id="bg-test"> | ||
| </p> | ||
| <p> | ||
| The following image has a <code>srcset</code> attribute and may change based on the display setting. <img src="i/tester.jpg" alt="" srcset="i/tester.jpg 1x, i/yinyang.png 2x"> | ||
| </p> | ||
|
|
||
| <a href="http://www.w3.org/TR/css3-values">Specification</a> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Initial</title> | ||
| <style type="text/css"> | ||
| :root {font-size: 30px;} | ||
| div#d01 {font-size: 66.6667%;} | ||
| p#p01 {font-size: 1rem;} | ||
| p#p02 {font-size: initial;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p> | ||
| This is paragraph outside the <code>div</code>. Its font size should be 30 pixels. | ||
| </p> | ||
|
|
||
| <div id="d01"> | ||
| This is a <code>div</code> with an <code>id</code> of <code>d01</code>. Its font size should be 20 pixels. | ||
|
|
||
| <p id="p01"> | ||
| This is a <code>p</code> with an <code>id</code> of <code>p01</code>. Its font size should be 30 pixels. | ||
| </p> | ||
| <p id="p02"> | ||
| This is a <code>p</code> with an <code>id</code> of <code>p02</code>. Its font size should be user-default size (generally 16px, but your user agent may vary). | ||
| </p> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="http://www.w3.org/TR/css3-values">Specification</a> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>calc()</title> | ||
| <style type="text/css"> | ||
| ol li {border: 1px dotted gray; background: rgba(255,255,0,0.1);} | ||
| ol li em {font-style: toggle(italic,normal);} | ||
| ol li:nth-child(2) {font-style: italic;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <ol> | ||
| <li>A list item with <em>some emphasized text</em> embedded within.</li> | ||
| <li>A list item with <em>some emphasized text</em> embedded within.</li> | ||
| </ol> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="http://www.w3.org/TR/css3-values">Specification</a> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Unset</title> | ||
| <style type="text/css"> | ||
| body {padding: 5em 1em; margin: 0 3em;} | ||
| div#d01 {background: #ECE; font-family: Verdana, sans-serif;} | ||
| p {background: #CEC; font-family: serif;} | ||
| p#p01 {background: unset; font-family: unset;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div id="d01"> | ||
| This is a <code>div</code> with an <code>id</code> of <code>d01</code>. Its background should be a light purple and use Verdana or a fallback sans-serif font. | ||
|
|
||
| <p> | ||
| This is a <code>p</code> without an <code>id</code>. Its background should be a light green and use a serif font. | ||
| </p> | ||
|
|
||
| <p id="p01"> | ||
| This is a <code>p</code> with an <code>id</code> of <code>p01</code>. Its bakground should be transparent (thus allowing the light purple to show through) and its font family should be the same as its parent element, overriding other values defined by lower-specificity rules. | ||
| </p> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="http://www.w3.org/TR/css3-values">Specification</a> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>CSS3 test: the 'q' unit</title> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <link rel="stylesheet" href="c/base.css" type="text/css"> | ||
| <style type="text/css" id="tests"> | ||
| p span {background: #FAA;} | ||
| p img#i1 {width: 120q; height: 12q;} | ||
| p img#i2 {width: 3cm; height: 0.3cm;} | ||
| </style> | ||
| </head> | ||
| <body id="www-meyerweb-com" class="css test suite"> | ||
| <p id="specref"><a href="https://www.w3.org/TR/css3-values/#absolute-lengths">https://www.w3.org/TR/css3-values/#absolute-lengths</a></p> | ||
|
|
||
| <div class="arena"> | ||
|
|
||
| <p id="p01"> | ||
| [#p01] This is a paragraph that contains two <tt>img</tt> elements. The first should be ten times as wide as it is tall, and its width should be (or correspond to) 3cm wide. The second should be the same size as the first. | ||
| <br/> | ||
| <img src="i/box-red.gif" alt="" id="i1"> | ||
| <br/> | ||
| <img src="i/box-red.gif" alt="" id="i2"> | ||
| </p> | ||
|
|
||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Header add Link "</eric/css/tests/httplink/testing.css>;rel=stylesheet;type=text/css" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>CSS test</title> | ||
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
| <link rel="stylesheet" type="text/css" href="../c/style-insert-tests.css"> | ||
| <style type="text/css" media="all" id="tests"> | ||
| p {border: thin dotted red;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p id="test"> | ||
| This paragraph should have a thick solid green border. If it has a thin dashed red border, the test has failed. | ||
| </p> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| p#test {border: thick solid green;} |