cascade results from the CPAN

cascade

HTML-DOM

view release on metacpan or search on metacpan

   ul li li span.c { color: green; }
   li.test1 span.d { color: green; }
   ul li.test2 span.e { color: green; }
   ul li.test3 span.f { color: red; }
   ul li#test3 span.f { color: green; }
   .test4 { color: red; }
   .test4 { color: green; }
   .c { color: green; }
  #twelve { font-size: 5px }
  </style>
  <link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order" title="6.4.1 Cascading order">
  <link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="6.4.3 Calculating a selector's specificity">
 </head>
 <body>
  <ul>
   <li> <span class="a" id=one> This should be green. </span> </li>
   <li> <span class="b" id=two> This should be green. </span>
    <ul>
     <li> <span class="c" id=three> This should be green. </span> </li>
     <li> <span class="c" id=four> This should be green. </span> </li>
     <li class="test1"> <span class="d" id=five> This should be green. </span> </li>
    </ul>

t/css.t view on Meta::CPAN

_END_
	$doc->close;

#warn $view->getComputedStyle($doc->getElementById('one'))->cssText;
#exit;

	my $green = qr/^(?:green|#0(?:0ff0|f)0|rgb\(0%?\s*,\s*(?:100%|255)\s*,\s*0%?\))\z/i;

	like $view->getComputedStyle($doc->getElementById($_))->color,
		$green,
		"cascade test $_ from t060401-c32-cascading-00-b.htm"
		for qw/ one two three four five six seven eight nine ten
		        eleven /;
	is $view->getComputedStyle($doc->getElementById('twelve'))
		->fontSize, '5px', 'author overrides user and ua';
	is $view->getComputedStyle($doc->getElementById('thirteen'))
		->fontSize, '4px', 'user overrides ua';
	is $view->getComputedStyle($doc->getElementById('fourteen'))
		->fontSize, '15px', 'fallback to ua';

t/css.t view on Meta::CPAN

  <link rel="author" href="mailto:ian at some server called hixie.ch" title="Ian Hickson">
  <style type="text/css">
   p { color: green ! important; }
   p { color: red; }
   p#id1 { color: red; }
   a { font-size: 1px !important }
   span { font-size: 23px }
   div { text-transform: none }
   div:first-line { text-transform: uppercase }
  </style>
  <link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#important-rules" title="6.4.2 !important rules">
  <link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order" title="6.4.1 Cascading order">
 </head>
 <body>
  <p> This line should be green. </p>
  <p id="id1"> This line should be green. </p>
  <p style="color: red;"> This line should be green. </p>
  <a href=""></a><span id=s></span>
  <div></div>
 </body>
</html>
_TEMDOBEDXK>N

( run in 0.508 second using v1.01-cache-2.11-cpan-49f99fa48dc )