blob: bda9adeeb6aa31d64bdc6eda4a9a51f20514b9e7 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: inline-block;
height: 100px;
width: 220px;
padding: 5px;
margin: 10px;
border: 1px solid black;
box-sizing: border-box;
font-family: monospace;
}
.composited {
will-change: transform;
}
.antialiased {
-webkit-font-smoothing: antialiased;
}
.smoothed {
-webkit-font-smoothing: subpixel-antialiased;
}
</style>
<script>
if (window.internals) {
internals.setFontSmoothingEnabled(true);
internals.settings.setSubpixelAntialiasedLayerTextEnabled(true)
}
</script>
</head>
<body>
<h2>Composited vs. non-composited</h2>
<section>
<div class="container">
This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<div class="composited container">
This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
</section>
<h2>Non-composited: antialiased vs. smoothed</h2>
<section>
<div class="container antialiased">
This text should look visibly thinner.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<div class="container smoothed">
This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
</section>
<h2>Composited: antialiased vs. smoothed</h2>
<section>
<div class="container composited antialiased">
This text should look visibly thinner.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<div class="container composited smoothed">
This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
</section>
</body>
</html>