Fluffed attribute-ci, added attribute-bar

meyerweb · meyerweb · commit e3bea1f05895 · 2017-11-14T16:34:07.000-05:00
diff --git a/attribute-bar.html b/attribute-bar.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS test</title>
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="c/style-insert-tests.css">
+<style type="text/css" media="all">
+li img {height: 1.5em;}
+</style>
+<style type="text/css" media="all" id="tests">
+ li[lang|="en"] {color: green;}
+li[class|="select"] {color: green;}
+ img[src|="i/tester"] {border: 5px solid green;}
+</style>
+</head>
+<body>
+
+<div>
+
+<ol>
+<li lang="en">List item, language of <code>en</code></li>
+<li lang="en-US">List item, language of <code>en-US</code></li>
+<li lang="en-US-GL">List item, language of <code>en-US-GL</code></li>
+<li class="select">List item, class <code>select</code></li>
+<li class="select-me">List item, class <code>select-me</code></li>
+<li class="select-me please">List item, class <code>select-me please</code></li>
+<li class="select me please">List item, class <code>select-me-please</code></li>
+<li class="please select-me">List item, class <code>please select-me</code></li>
+<li class="please select me">List item, class <code>please select me</code></li>
+<li><img src="i/tester.jpg"> Image, source <code>tester.jpg</code></li>
+<li><img src="i/tester-sm.jpg"> Image, source <code>tester-sm.jpg</code></li>
+</ol>
+
+</div>
+
+</body>
+</html>
diff --git a/attribute-ci.html b/attribute-ci.html
@@ -4,6 +4,9 @@
 <title>CSS test</title>
 <meta charset="utf-8" />
 <link rel="stylesheet" type="text/css" href="c/style-insert-tests.css">
+<style type="text/css" media="all">
+li[class]::before {content: "[." attr(class) "] ";}
+</style>
 <style type="text/css" media="all" id="tests">
 *[class~="test"] {background: #DDD;}
 *[class~="test" i] {color: green;}
