index.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>The CSS3 Test</title>
<link rel="stylesheet" href="style.css" />

<script>var _gaq = [['_setAccount', 'UA-28874455-1'], ['_trackPageview'], ['_gat._anonymizeIp']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>

</head>
<body>

<h1>The CSS3 test</h1>

<div id="content">
	<section id="tests">
		<div id="hgroup">
			<h1>Your browser scores <strong id="score">0%</strong></h1>
			<h2>Determined by passing <strong id="passedTests"></strong> tests out of <strong id="totalTests"></strong> total for <strong id="total"></strong> features</h2>
		</div>

		<section id="all"></section>
	</section>

	<aside>
		<section class="caution">
			<p><strong>Caution:</strong>
			This test checks which CSS3 features the browser recognizes, <em>not</em> whether they are implemented correctly.</p>
		</section>

		<p>Time taken: <strong id="timeTaken"></strong></p>

		<section>
			<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=css3testcom" id="_carbonads_js"></script>
		</section>

		<section>
			<h1>Filter:</h1>
			<form>
				<select id="filter">
					<option value="" title="All specifications including experimental ones but without CSS 2.2">All except CSS 2.2</option>
					<option value="all" title="All specifications including experimental ones">All</option>
					<option value="stable" title="All specifications listed in the latest CSS snapshot, their predecessors and others that won't change much anymore">Stable</option>
					<option value="experimental" title="All specifications not listed in the latest CSS snapshot">Experimental</option>
					<optgroup label="Standardization groups">
						<option value="csswg" title="All specifications managed by the CSS Working Group (CSSWG) except CSS Houdini">CSS</option>
						<option value="houdini" title="All specifications related to CSS Houdini managed by the CSS Working Group (CSSWG)">CSS Houdini</option>
						<option value="svgwg" title="All specifications managed by the SVG Working Group (SVGWG)">SVG</option>
						<option value="whatwg" title="All specifications managed by the Web Hypertext Application Technology Working Group (WHATWG)">WHATWG</option>
						<option value="others" title="All specifications managed by other standardization groups">Others</option>
					</optgroup>
					<optgroup label="CSS snapshots">
						<option value="css2.2" title="Everything included in CSS 2.2">CSS 2.2</option>
						<option value="css2007" title="All specifications marked as official part of the CSS 2007 snapshot">CSS 2007</option>
						<option value="css2010" title="All specifications marked as official part of the CSS 2010 snapshot">CSS 2010</option>
						<option value="css2015" title="All specifications marked as official part of the CSS 2015 snapshot">CSS 2015</option>
						<option value="css2017" title="All specifications marked as official part of the CSS 2017 snapshot">CSS 2017</option>
						<option value="css2018" title="All specifications marked as official part of the CSS 2018 snapshot">CSS 2018</option>
						<option value="css2020" title="All specifications marked as official part of the CSS 2020 snapshot">CSS 2020</option>
						<option value="css2021" title="All specifications marked as official part of the CSS 2021 snapshot">CSS 2021</option>
						<option value="css2022" title="All specifications marked as official part of the CSS 2022 snapshot">CSS 2022</option>
						<option value="css2023" title="All specifications marked as official part of the CSS 2023 snapshot">CSS 2023</option>
						<option value="css2024" title="All specifications marked as official part of the CSS 2024 snapshot">CSS 2024</option>
					</optgroup>
				</select>
			</form>
		</section>

		<section>
			<h1>Specs tested:</h1>
			<ul id="specsTested"></ul>
			Want more tests? <a href="https://github.com/LeaVerou/css3test" target="_blank">Be my guest!</a>
		</section>

		<footer>
			<p>
				<a href="https://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBidzawNDA" target="_blank">Results</a>
				&#10047; Handcrafted by <a href="https://lea.verou.me">Lea Verou</a> and <a href="https://github.com/LeaVerou/css3test/graphs/contributors">friends</a>
				&#10047; <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=lea%40verou%2eme&amp;lc=GR&amp;item_name=Lea%20Verou&amp;currency_code=EUR&amp;bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted">Donate</a></p>
		</footer>
	</aside>
</div>

<a id="mark" href="https://lea.verou.me"><img src="https://lea.verou.me/mark.svg" title="Lea Verou was here" alt="Lea Verou was here" /></a>

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=blissfuljs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.3/bliss.js"></script>
<script src="supports.js"></script>
<script src="csstest.js" type="module"></script>
<script src="filter.js"></script>

</body>
</html>