Added some simple cascade layer tests

meyerweb · Dec 12, 2021 · 12986c2 · 12986c2
1 parent 10c2f4c
commit 12986c2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/cascade-attachment.html b/cascade-attachment.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>03 Cascade Element Attachment</title>
+<style type="text/css">
+p#one {color: red;}
+p#two {color: green: !important;}
+</style>
+</head>
+<body>
+
+<p id="one" style="color: green;">
+This is a paragraph with an ID of one.
+</p>
+<p id="two" style="color: red !important;">
+This is a paragraph with an ID of two.
+</p>
+
+</body>
+</html>
diff --git a/cascade-layers.html b/cascade-layers.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>03 Cascade Layers</title>
+<style type="text/css">
+@layer page {
+   h1 {color: maroon;}
+   p {margin-top: 0;}
+}
+
+@layer site {
+   body {font-size: 1.1rem;}
+   h1 {color: orange;}
+   p {margin-top: 0.5em;}
+}
+
+p {margin-top: 1em;}
+
+@layer site, component, page;
+</style>
+</head>
+<body>
+
+
+<h1>This is an H1</h1>
+<p>
+This is a paragraph.
+</p>
+
+</body>
+</html>
diff --git a/pseudo-selection.html b/pseudo-selection.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>::selection</title><style type="text/css">.test1 {color: black; background-color: white;}.test2 {color: white; background-color: black;}.test1::selection {color: silver; background-color: rebeccapurple;}.test2::selection {color: rebeccapurple; background-color: silver;}</style></head><body id="www-meyerweb-com" class="css"><p>This paragraph has no class, and should be styled as default for the user agent.  Text can be selected in this paragrapha in order to see default selection styles.</p><p class="test1">This paragraph has a <code>class</code> of <code>test1</code>, and its text should be black on white.  Text should be selected starting somewhere inside this paragraph, and continuing into the next paragaph.</p><p class="test2">This paragraph has a <code>class</code> of <code>test2</code>, and its text should be white on black.  Text should be selected starting somewhere inside the previous paragraph, and continuing into this paragaph.</p></body></html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html><head><meta charset="utf-8" /><title>::selection</title><style type="text/css">.test1 {color: black; background-color: white;}.test2 {color: white; background-color: black;}.test1::selection {color: silver; background-color: rebeccapurple;}.test2::selection {color: rebeccapurple; background-color: silver;}</style></head><body id="www-meyerweb-com" class="css"><p>This paragraph has no class, and should be styled as default for the user agent. Text can be selected in this paragrapha in order to see default selection styles.</p><p class="test1">This paragraph has a <code>class</code> of <code>test1</code>, and its text should be black on white. Text should be selected starting somewhere inside this paragraph, and continuing into the next paragaph.</p><p class="test2">This paragraph has a <code>class</code> of <code>test2</code>, and its text should be white on black. Text should be selected starting somewhere inside the previous paragraph, and continuing into this paragaph.</p></body></html>
Expand Down