cobalt/demos/content/selector-tester/selector-tester.html - cobalt - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
   <style>
     /*
      * The list of selectors that are to be tested. The javascript code will
      * fill and clear the style declaration on each rule to demonstrate the
      * result.
      */
     div {}
     span {}
     .foo {}
     #title {}
     :empty {}
     :focus {}
     div:not(.foo) {}
     q:before { content: '\"';}
     q:after { content: '\"';}
     span.bar {}
     .foo.bar {}
     .foo .foo {}
     .bar > .bar {}
     .foo + .bar {}
     .foo ~ .bar {}
     .bar > .foo + .bar {}
     div, .foo {}
     div, span {}
   </style>

   <style>
     body {
       background-color: rgb(255, 255, 255);
       color: #0047ab;
       font-family: Roboto;
       font-size: 30px;
       margin-top:50px;
     }

     markup {
       color: #666;
       font-size: 20px;
     }

     .selected {
       background: #00a882;
     }
   </style>

   <script>
     var SELECTED_COLOR = '#00a882';
     var SELECTED_CLASS = 'selected';
     var SELECTOR_LIST_ID = 'selector-list';
     var FOCUS_ID = 'focus';

     var currentRule = 0;
     var numberOfRules = 0;
     var selectors;
     var cssRules;

     // Calculates the next rule, removes the style on the current rule and
     // sets it on the next rule.
     function moveRuleHighlightBy(delta) {
       if (numberOfRules == 0) {
         return;
       }
       nextRule = (currentRule + delta + numberOfRules) % numberOfRules;
       selectors[currentRule].className = '';
       selectors[nextRule].className = SELECTED_CLASS;
       cssRules[currentRule].style.backgroundColor = '';
       cssRules[nextRule].style.backgroundColor = SELECTED_COLOR;
       currentRule = nextRule;
     }

     window.addEventListener('load', function() {
       document.getElementById(FOCUS_ID).focus();
       selectors = document.getElementById(SELECTOR_LIST_ID).children;
       cssRules = document.styleSheets[0].cssRules;
       numberOfRules = cssRules.length;
       moveRuleHighlightBy(0);
     });

     document.addEventListener('keydown', function(event) {
       if (event.keyCode == 38) {  // Arrow up
         moveRuleHighlightBy(-1);
       } else if (event.keyCode == 40) {  // Arrow down
         moveRuleHighlightBy(1);
       }
     });
   </script>
 </head>

 <body>
   <my-div style="position:absolute; left: 5%; width: 40%;" id="selector-list">
     <p>div</p>
     <p>span</p>
     <p>.foo</p>
     <p>#title</p>
     <p>:empty</p>
     <p>:focus</p>
     <p>div:not(.foo)</p>
     <p>q:before</p>
     <p>q:after</p>
     <p>span.bar</p>
     <p>.foo.bar</p>
     <p>.foo .foo</p>
     <p>.bar > .bar</p>
     <p>.foo + .bar</p>
     <p>.foo ~ .bar</p>
     <p>.bar > .foo + .bar</p>
     <p>div, .foo</p>
     <p>div, span</p>
   </my-div>

   <my-div style="position:absolute; left: 50%; width: 40%;">
     <div id="title">
     <markup>&lt;div id="title"&gt;</markup>
       Hello, Cobalt!
     <markup>&lt;/div&gt;</markup>
     </div>

     <div>
     <markup>&lt;div&gt;</markup>
       div
     <markup>&lt;/div&gt;</markup>
     </div>

     <div tabIndex="-1" id="focus">
     <markup>&lt;div tabIndex="-1" id="focus"&gt;</markup>
       div that has focus
     <markup>&lt;/div&gt;</markup>
     </div>

     <span>
     <markup>&lt;span&gt;</markup>
       span
     <markup>&lt;/span&gt;</markup>
     </span>

     <div class="foo">
     <markup>&lt;div class="foo"&gt;</markup>
       foo div
     <markup>&lt;/div&gt;</markup>
     </div>

     <span class="foo">
     <markup>&lt;span class="foo"&gt;</markup>
       foo span
     <markup>&lt;/span&gt;</markup>
     </span>

     <div class="bar">
     <markup>&lt;div class="bar"&gt;</markup>
       bar div
     <markup>&lt;/div&gt;</markup>
     </div>

     <span class="bar">
     <markup>&lt;span class="bar"&gt;</markup>
       bar span
     <markup>&lt;/span&gt;</markup>
     </span>

     <div class="foo bar">
     <markup>&lt;div class="foo bar"&gt;</markup>
       foo bar div
     <markup>&lt;/div&gt;</markup>
     </div>

     <q>
     <markup>&lt;q&gt;</markup>
       q
     <markup>&lt;/q&gt;</markup>
     </q>

     <div class="foo">
     <markup>&lt;div class="foo"&gt;</markup>
       outer foo div
       <div class="bar" style="padding-left: 30px;">
       <markup>&lt;div class="bar"&gt;</markup>
         middle bar div
         <div class="foo" style="padding-left: 30px;">
         <markup>&lt;div class="foo"&gt;</markup>
           inner foo div
         <markup>&lt;/div&gt;</markup>
         </div>

         <div class="bar" style="padding-left: 30px;">
         <markup>&lt;div class="bar"&gt;</markup>
           inner bar div
         <markup>&lt;/div&gt;</markup>
         </div>

         <span class="bar" style="padding-left: 30px;">
         <markup>&lt;span class="bar"&gt;</markup>
           inner bar span
         <markup>&lt;/span&gt;</markup>
         </span>
       <p/>
       <markup>&lt;/div&gt;</markup>
       </div>
     <markup>&lt;/div&gt;</markup>
     </div>

     <div style="height: 20px; width: 20px;"><!--comment--></div>
     <markup>&lt;div&gt;&lt;!--The empty div above--&gt;&lt;/div&gt;</markup>

   </my-div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	/*
	* The list of selectors that are to be tested. The javascript code will
	* fill and clear the style declaration on each rule to demonstrate the
	* result.
	*/
	div {}
	span {}
	.foo {}
	#title {}
	:empty {}
	:focus {}
	div:not(.foo) {}
	q:before { content: '\"';}
	q:after { content: '\"';}
	span.bar {}
	.foo.bar {}
	.foo .foo {}
	.bar > .bar {}
	.foo + .bar {}
	.foo ~ .bar {}
	.bar > .foo + .bar {}
	div, .foo {}
	div, span {}
	</style>

	<style>
	body {
	background-color: rgb(255, 255, 255);
	color: #0047ab;
	font-family: Roboto;
	font-size: 30px;
	margin-top:50px;
	}

	markup {
	color: #666;
	font-size: 20px;
	}

	.selected {
	background: #00a882;
	}
	</style>

	<script>
	var SELECTED_COLOR = '#00a882';
	var SELECTED_CLASS = 'selected';
	var SELECTOR_LIST_ID = 'selector-list';
	var FOCUS_ID = 'focus';

	var currentRule = 0;
	var numberOfRules = 0;
	var selectors;
	var cssRules;

	// Calculates the next rule, removes the style on the current rule and
	// sets it on the next rule.
	function moveRuleHighlightBy(delta) {
	if (numberOfRules == 0) {
	return;
	}
	nextRule = (currentRule + delta + numberOfRules) % numberOfRules;
	selectors[currentRule].className = '';
	selectors[nextRule].className = SELECTED_CLASS;
	cssRules[currentRule].style.backgroundColor = '';
	cssRules[nextRule].style.backgroundColor = SELECTED_COLOR;
	currentRule = nextRule;
	}

	window.addEventListener('load', function() {
	document.getElementById(FOCUS_ID).focus();
	selectors = document.getElementById(SELECTOR_LIST_ID).children;
	cssRules = document.styleSheets[0].cssRules;
	numberOfRules = cssRules.length;
	moveRuleHighlightBy(0);
	});

	document.addEventListener('keydown', function(event) {
	if (event.keyCode == 38) { // Arrow up
	moveRuleHighlightBy(-1);
	} else if (event.keyCode == 40) { // Arrow down
	moveRuleHighlightBy(1);
	}
	});
	</script>
	</head>

	<body>
	<my-div style="position:absolute; left: 5%; width: 40%;" id="selector-list">
	<p>div</p>
	<p>span</p>
	<p>.foo</p>
	<p>#title</p>
	<p>:empty</p>
	<p>:focus</p>
	<p>div:not(.foo)</p>
	<p>q:before</p>
	<p>q:after</p>
	<p>span.bar</p>
	<p>.foo.bar</p>
	<p>.foo .foo</p>
	<p>.bar > .bar</p>
	<p>.foo + .bar</p>
	<p>.foo ~ .bar</p>
	<p>.bar > .foo + .bar</p>
	<p>div, .foo</p>
	<p>div, span</p>
	</my-div>

	<my-div style="position:absolute; left: 50%; width: 40%;">
	<div id="title">
	<markup><div id="title"></markup>
	Hello, Cobalt!
	<markup></div></markup>
	</div>

	<div>
	<markup><div></markup>
	div
	<markup></div></markup>
	</div>

	<div tabIndex="-1" id="focus">
	<markup><div tabIndex="-1" id="focus"></markup>
	div that has focus
	<markup></div></markup>
	</div>

	<span>
	<markup><span></markup>
	span
	<markup></span></markup>
	</span>

	<div class="foo">
	<markup><div class="foo"></markup>
	foo div
	<markup></div></markup>
	</div>

	<span class="foo">
	<markup><span class="foo"></markup>
	foo span
	<markup></span></markup>
	</span>

	<div class="bar">
	<markup><div class="bar"></markup>
	bar div
	<markup></div></markup>
	</div>

	<span class="bar">
	<markup><span class="bar"></markup>
	bar span
	<markup></span></markup>
	</span>

	<div class="foo bar">
	<markup><div class="foo bar"></markup>
	foo bar div
	<markup></div></markup>
	</div>

	<q>
	<markup><q></markup>
	q
	<markup></q></markup>
	</q>

	<div class="foo">
	<markup><div class="foo"></markup>
	outer foo div
	<div class="bar" style="padding-left: 30px;">
	<markup><div class="bar"></markup>
	middle bar div
	<div class="foo" style="padding-left: 30px;">
	<markup><div class="foo"></markup>
	inner foo div
	<markup></div></markup>
	</div>

	<div class="bar" style="padding-left: 30px;">
	<markup><div class="bar"></markup>
	inner bar div
	<markup></div></markup>
	</div>

	<span class="bar" style="padding-left: 30px;">
	<markup><span class="bar"></markup>
	inner bar span
	<markup></span></markup>
	</span>
	<p/>
	<markup></div></markup>
	</div>
	<markup></div></markup>
	</div>

	<div style="height: 20px; width: 20px;"><!--comment--></div>
	<markup><div><!--The empty div above--></div></markup>

	</my-div>
	</body>
	</html>