<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS: 15 simple tests of :empty</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="help" href="https://drafts.csswg.org/selectors-3/#empty-pseudo"/>
  <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-empty-pseudo"/>
  <link rel="match" href="selectors-empty-001-ref.xml"/>
  <meta name="flags" content="nonHTML"/>
  <style type="text/css">
   tests, tests * {
    display: block;
   }
   tests > * {
    border: solid thick red;
    height: 1em;
    padding: 4px;
    margin: 4px;
    color: white;
   }
   tests[type=positive] > :empty, tests[type=negative] > :not(:empty) {
    border: solid thick lime;
   }
  </style>
 </head>
 <body>
  <p>Below there should be fifteen big green boxes and no red.</p>
  <tests xmlns="http://www.example.org/" type="positive">
    <test1/>
    <test2></test2>
    <test3><!-- --></test3>
    <test4><?testfour?></test4>
    <test5 title="data"></test5>
  </tests>
  <tests xmlns="http://www.example.org/" type="negative">
    <test1><test1> </test1></test1>
    <test2>green!</test2>
    <test3>&gt;&lt;</test3>
    <test4>&#x2211;</test4>
    <test5><test5/></test5>
    <test6> </test6>
    <test7> <!-- --></test7>
    <test8> <?testfour?></test8>
    <test9><!-- --> </test9>
    <test10><?testfour?> </test10>
  </tests>
 </body>
</html>
