ladybird/Tests/LibWeb/Text/input/css/text-transform-dynamic-change.html

<!DOCTYPE html>
<style>
    #theDiv {
        width: max-content;
    }
</style>
<script src="../include.js"></script>
<div id="theDiv">heLLo FrIends</div>
<script>
    test(() => {
        println(theDiv.offsetWidth);
        theDiv.style.textTransform = 'uppercase';
        println(theDiv.offsetWidth);
        theDiv.style.textTransform = 'lowercase';
        println(theDiv.offsetWidth);
        theDiv.style.textTransform = 'capitalize';
        println(theDiv.offsetWidth);
    });
</script>
Meta: Add DOCTYPEs to most text tests 2025-03-18 19:28:35 +01:00			`<!DOCTYPE html>`
LibWeb: Update the layout tree when CSS text-transform changes Because we cache the transformed text string in text nodes affected by text-transform, we have to actually update the layout tree when this property value changes. 2025-03-08 17:54:04 +01:00			`<style>`
			`#theDiv {`
			`width: max-content;`
			`}`
			`</style>`
			`<script src="../include.js"></script>`
			`<div id="theDiv">heLLo FrIends</div>`
			`<script>`
			`test(() => {`
			`println(theDiv.offsetWidth);`
			`theDiv.style.textTransform = 'uppercase';`
			`println(theDiv.offsetWidth);`
			`theDiv.style.textTransform = 'lowercase';`
			`println(theDiv.offsetWidth);`
			`theDiv.style.textTransform = 'capitalize';`
			`println(theDiv.offsetWidth);`
			`});`
			`</script>`