third_party/blink/web_tests/svg/custom/SVGNumber-interface.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" onload="init()">

    <script>
        function init()
        {
            var number = document.rootElement.createSVGNumber();

            // Test initial value
            if (number.value == 0) {
                document.getElementById("test1").setAttribute("fill", "green");
            }
            
            // Assign new values from local function
            number.value = 100;
            if (number.value == 100) {
                document.getElementById("test2").setAttribute("fill", "green");
            }

            // Assign new values from external function
            assignValues(number);
            if (number.value == 300) {
                document.getElementById("test3").setAttribute("fill", "green");
            }

            // Create new number in external function, check values
            var newNumber = createNewNumber();
            if (newNumber.value == 66) {
                document.getElementById("test4").setAttribute("fill", "green");
            }

            // Check swapping of number objects
            var savedNumber = number;
            number = newNumber;
            if (number.value == 66) {
                document.getElementById("test5").setAttribute("fill", "green");
            }

            number = savedNumber;
            if (number.value == 300) {
                document.getElementById("test6").setAttribute("fill", "green");
            }

            // Modifying savedNumber, should also modify number
            savedNumber.value = 150;

            if (number.value == 150) {
                document.getElementById("test7").setAttribute("fill", "green");
            }
        }

        function assignValues(n)
        {
            n.value = 300;
        }

        function createNewNumber()
        {
            var number = document.rootElement.createSVGNumber();
            number.value = 66;
            return number;
        }
    </script>
    
    <rect id="test1" transform="translate(0, 0)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test2" transform="translate(0, 30)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test3" transform="translate(0, 60)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test4" transform="translate(0, 90)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test5" transform="translate(0, 120)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test6" transform="translate(0, 150)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test7" transform="translate(0, 180)" x="0" y="0" width="100" height="20" fill="red"/>
</svg>