color-correction-backgrounds-and-text.html

<html>
<style>
    .text {
        color:green;
        font-size:150px;
        font-weight:bold;
    }
    
    .container {
        background-color:green; 
        width:200px; 
        height:200px;
    }
</style>
<body>

<p>This container has no color correction, and neither does the text inside, so it will not be visible since both are green and uncorrected.</p>
<div class="container">
    <span class="text">G</span>
</div>

<p>This container has sRGB color correction specified, and so does the text inside, so the text will not be visible since both are green and corrected.</p>
<div class="container" style="-webkit-color-correction:sRGB;">
    <span class="text" style="-webkit-color-correction:sRGB;">G</span>
</div>

<p>This container has sRGB color correction specified. The text inside does not have the property specified, but the text inherits the container's style, so the text will not be visible since both are green and corrected.</p>
<div class="container" style="-webkit-color-correction:sRGB;">
    <span class="text">G</span>
</div>

<p>This container has default color-correction specified, and the text has sRGB color correction specified. This text is visible even though both are green since the text is corrected and the container is not.</p>
<div class="container" style="-webkit-color-correction:default;">
    <span class="text" style="-webkit-color-correction:sRGB;">G</span>
</div>

</body>
</html>
chromium/third_party/blink/web_tests/fast/css/color-correction-backgrounds-and-text.html
