View All Attachments for Bug 159022

Attachment #426947
test case	text/html	2021-04-23 14:24:36 PDT	1.42 KB	no flags	Details

<!DOCTYPE html>
<html>
<head>
	<title>CSS content alt test</title>
	<style type="text/css">
		
		/* Shared between examples. */
		.spec::before, .spec::after, .compat::before, .compat::after {
			display: inline;
			position: relative;
			color: red;
		}


		/* Current Spec Version as of April 2021 */
		.spec::before {	
			content: "\2606" / "New! ";
		}
		.spec::after {
			content: " Display text. " / " Alternative text. ";
		}


		/* Backwards-Compatible Version as of April 2021.*/
		.compat::before {	
			/* Note: property order is important. */
			-webkit-alt: "New! ";
			alt: "New! ";
			content: "\2606";
			/* Once implemented in WebKit, this property will override the previous three. */
			content: "\2606" / "New! ";

		}
		.compat::after {
			/* Note: property order is important. */
			-webkit-alt: " Alternative text. ";
			alt: " Alternative text. ";
			content: " Display text. ";
			/* Once implemented in WebKit, this property will override the previous three. */
			content: " Display text. " / " Alternative text. ";
		}

	</style>
</head>
<body>

	<p class="spec">Generated content before and after this paragraph is as currently specified in <a href="https://www.w3.org/TR/css-content-3/#alt">CSS Generated Content.</a></p>


	<p class="compat">Generated content before and after this paragraph uses a combination of currently specified and deprecated properties. This should remain backwards-compatible.</p>



</body>
</html>