marcustyphoon/css4 tests.html

## css4 tests.html
<!DOCTYPE html>
<html>

<head>
  <style>
    /* setup */
    div {
      border: 2px solid black;
      margin: 1ch;
      padding: 1ch;
    }

    div.fancy {
      border: 8px solid green;
    }

    /* :is() with nested selector */
    span:is(.fancy *)::before {
      color: red;
      content: " one of my parents is green! ";
    }

    span:is(.fancy > *)::after {
      color: orange;
      content: " my direct parent is green! ";
    }

    /* :not() with nested selector */
    span:not(.fancy *)::before {
      color: blue;
      content: " none of of my parents are green! ";
    }

    /* :has() with nested selector: chromium only for now */
    div:has(> .fancy, > * > .fancy) {
      outline: 3px dashed lightgreen;
      outline-offset: -6px;
    }

    div:has(> .fancy, > * > .fancy):before {
      color: lightgreen;
      content: "my child or second child is green!";
    }

    /* :has() with :not() with nested selector: chromium only for now */
    #testone>div:has(span:not(.fancy > *)):after {
      color: purple;
      content: "my inners span's direct parent is not green!";
    }

    /* :has() with :not() with nested selector: chromium only for now */
    /* I gave up on making this one have intelligible output */
    div:not(:has(> .fancy, > * > .fancy), :is(body > div > div)) {
      border-left: 3px solid lightblue;
    }
  </style>
</head>

<body>
  <div>
    <div>
      <div class="fancy">
        <div>
          <div><span></span></div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <div class="fancy">
          <div><span></span></div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <div>
          <div class="fancy"><span></span></div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <div>
          <div><span></span></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style>
	/* setup */
	div {
	border: 2px solid black;
	margin: 1ch;
	padding: 1ch;
	}

	div.fancy {
	border: 8px solid green;
	}

	/* :is() with nested selector */
	span:is(.fancy *)::before {
	color: red;
	content: " one of my parents is green! ";
	}

	span:is(.fancy > *)::after {
	color: orange;
	content: " my direct parent is green! ";
	}

	/* :not() with nested selector */
	span:not(.fancy *)::before {
	color: blue;
	content: " none of of my parents are green! ";
	}

	/* :has() with nested selector: chromium only for now */
	div:has(> .fancy, > * > .fancy) {
	outline: 3px dashed lightgreen;
	outline-offset: -6px;
	}

	div:has(> .fancy, > * > .fancy):before {
	color: lightgreen;
	content: "my child or second child is green!";
	}

	/* :has() with :not() with nested selector: chromium only for now */
	#testone>div:has(span:not(.fancy > *)):after {
	color: purple;
	content: "my inners span's direct parent is not green!";
	}

	/* :has() with :not() with nested selector: chromium only for now */
	/* I gave up on making this one have intelligible output */
	div:not(:has(> .fancy, > * > .fancy), :is(body > div > div)) {
	border-left: 3px solid lightblue;
	}
	</style>
	</head>

	<body>
	<div>
	<div>
	<div class="fancy">
	<div>
	<div><span></span></div>
	</div>
	</div>
	</div>
	</div>
	<div>
	<div>
	<div>
	<div class="fancy">
	<div><span></span></div>
	</div>
	</div>
	</div>
	</div>
	<div>
	<div>
	<div>
	<div>
	<div class="fancy"><span></span></div>
	</div>
	</div>
	</div>
	</div>
	<div>
	<div>
	<div>
	<div>
	<div><span></span></div>
	</div>
	</div>
	</div>
	</div>
	</body>

	</html>