<!DOCTYPE html><!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<head>
<meta name="viewport" content="initial-scale=0.6666">
<script>
if (window.internals) {
    window.internals.settings.setTextAutosizingEnabled(true);
    window.internals.settings.setTextAutosizingUsesIdempotentMode(true);
}
</script>
<script src="../../../../resources/js-test-pre.js"></script>
</head>
<body>
<div style="background: green;"><span id="target1" style="font-size: 12px;">Test</span></div>
<div style="background: green; overflow: auto;"><span id="target2" style="float: right; font-size: 12px;">Test</span></div>
<div style="background: green;"><span id="target3" style="display: inline-block; font-size: 12px; width: 20px;">Test</span></div>
<div style="background: green;"><span style="display: inline-block; height: 12px; font-size: 12px;"><span id="target4">Test</span></span></div>
<div style="background: green;"><span id="target5" style="position: absolute; left: 0px; top: 0px; font-size: 12px;">Test</span></div>
<div style="background: green;"><span id="target6" style="display: none; font-size: 12px;">Test</span></div>
<div style="background: green;"><span id="comparison" style="font-size: 12px;">Test<span>Test<span>Test<span id="target7">Test</span></span></span></span></div>
<div style="background: green;"><span id="target8" style="font-size: 12px; -webkit-text-size-adjust: 100%">Test</span></div>
<div style="background: green;"><span id="target9" style="font-size: 12px; display: inline-block;">Test</span></div>
<div style="background: green;"><span id="target10" style="font-size: 12px; width: 20px; height: 12px;">Test</span></div>
<div style="background: green;"><span id="target11" style="font-size: 12px; height: 20px; position: fixed; white-space: nowrap;">Test</span></div>
<div style="background: green;"><span id="target12" style="font-size: 12px; height: 20px; position: fixed; float: right;">Test</span></div>
<div style="background: green;"><span id="target13" style="font-size: 12px; height: 20px; position: fixed; float: right; overflow-x: hidden; width: 100px;">Test</span></div>
<div style="background: green;"><span id="target14" style="font-size: 12px; height: 20px; width: 100px; float: right;">Test</span></div>
<div style="background: green;"><span id="target15" style="font-size: 12px; overflow-y: hidden; float: right;">Test</span></div>
<div style="background: green;"><span id="target16" style="font-size: 12px; float: right;">Test</span></div>
<div style="background: green;"><span id="target17" style="font-size: 12px; -webkit-text-size-adjust: 100%;">Test</span></div>
<div style="background: green; line-height: 1.25; max-height: 45px; font-size: 12px;">
    <span>Test</span>
    <br>
    <span id="target18">Test</span>
    <br>
    <span>Test</span>
</div>
<div style="background: green; line-height: 20px; max-height: 20px; font-size: 12px;" id="target19">Test</div>
<script>
let result;
function check(name, shouldGetAutosized) {
    let target = document.getElementById(name);
    target.offsetWidth;
    result = Number.parseInt(window.getComputedStyle(target).getPropertyValue("font-size"));
    debug(`Checking ${name}:`);
    if (shouldGetAutosized)
        shouldBeGreaterThanOrEqual("result", "13");
    else
        shouldBe("result", "12");
}
check("target1", true);
check("target2", true);
check("target3", false);
check("target4", true);
check("target5", true);
check("target6", false);

debug(`Checking target7:`);
let target = document.getElementById("target7");
target.offsetWidth;
let comparison = document.getElementById("comparison");
comparison.offsetWidth;
result = Number.parseInt(window.getComputedStyle(target).getPropertyValue("font-size"));
let result2 = Number.parseInt(window.getComputedStyle(comparison).getPropertyValue("font-size"));
shouldBeGreaterThanOrEqual("result", "result2");

check("target8", false);
check("target9", true);
check("target10", true);

// Below are some common scenarios where we prefer (or prefer to not) adjust text size. These examples are inspired by
// common patterns in real webpages.
check("target11", true);
check("target12", true);
check("target13", false);
check("target14", false);
check("target15", true);
check("target16", true);
check("target17", false);
check("target18", false);
check("target19", true);
</script>
<script src="../../../../resources/js-test-post.js"></script>
</body>
</html>