<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test line-height `getComputedStyle` serialization</title>
    <style>
        #target {
            font-family: Ahem;
            font-size: 10px;
        }
    </style>
</head>
<body>
<p id="target">text of font-size 10px</p>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    let target = document.getElementById('target')
    const test_line_height = (line_height_percent, expected_line_height) => {
        test(() => {
            target.style['line-height'] = line_height_percent
            const actual_line_height = window.getComputedStyle(target)['line-height']
            assert_equals(actual_line_height, expected_line_height)
        }, `with font-size: 10px, #target.style['line-height'] = ${line_height_percent} should result in a used line-height of ${expected_line_height}`)
    }
    
    test_line_height(1e+26, '999999914697178458896728064px')
    
    // Per spec, CSS numbers shouldn't serialize with more than 6 decimal places.
    test_line_height(2.53821, '25.382099px')
    test_line_height(2.6666667, '26.666664px')
    // 20 decimals.
    test_line_height(2.12345678912345678912, '21.234568px')
    test_line_height(2.5, '25px')
    test_line_height(2, '20px')
    test_line_height(1.05, '10.5px')
    test_line_height(1.049, '10.49px')
    test_line_height(1.0491, '10.491001px')
    test_line_height(0, '0px')
    test_line_height(1, '10px')
    
    target.remove()
</script>
</body>
</html>