
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/

describe('graphic_setOption', function() {

    var utHelper = window.utHelper;

    var testCase = utHelper.prepare([
        'echarts/src/chart/line',
        'echarts/src/component/graphic',
        'echarts/src/component/grid'
    ]);

    var NUMBER_PRECISION = 6;

    function propHasAll(els, propsObjList) {
        for (var i = 0; i < propsObjList.length; i++) {
            propHas(els[i], propsObjList[i]);
        }
    }

    function propHas(target, propsObj) {
        if (target == null || propsObj == null) {
            expect(false).toEqual(true);
        }
        expect(typeof target === 'object' && typeof propsObj === 'object').toEqual(true);

        // propsObj can be array
        if (propsObj instanceof Array) {
            expect(target instanceof Array).toEqual(true);
            for (var i = 0; i < propsObj.length; i++) {
                each(target[i], propsObj[i]);
            }
        }
        else {
            for (var name in propsObj) {
                if (propsObj.hasOwnProperty(name)) {
                    each(target[name], propsObj[name]);
                }
            }
        }

        function each(targetVal, propVal) {
            if (propVal == null) {
                expect(targetVal == null).toEqual(true);
            }
            // object or array
            else if (typeof propVal === 'object') {
                propHas(targetVal, propVal);
            }
            else if (typeof propVal === 'number') {
                expect(
                    typeof targetVal === 'number'
                    && propVal.toFixed(NUMBER_PRECISION) === targetVal.toFixed(NUMBER_PRECISION)
                ).toEqual(true);
            }
            else {
                expect(targetVal === propVal).toEqual(true);
            }
        }
    }

    var imageURI = 'data:image/jpeg;base64, '; // jshint ignore:line











    describe('option', function () {

        testCase.createChart()('optionFlatten', function () {
            this.chart.setOption({
                graphic: [
                    {
                        id: 'uriimg',
                        type: 'image',
                        name: 'nameuriimg',
                        origin: [20, 20],
                        left: 10,
                        top: 10,
                        style: {
                            image: imageURI,
                            width: 80,
                            height: 80,
                            opacity: 0.5
                        }
                    },
                    {
                        type: 'group',
                        id: 'gr',
                        width: 230,
                        height: 110,
                        position: [70, 90],
                        children: [
                            {
                                type: 'rect',
                                name: 'rectxx',
                                shape: {
                                    width: 230,
                                    height: 80
                                },
                                style: {
                                    stroke: 'red',
                                    fill: 'transparent',
                                    lineWidth: 2
                                },
                                z: 100
                            },
                            {
                                id: 'grouptext',
                                type: 'text',
                                bottom: 0,
                                right: 0,
                                rotation: 0.5,
                                style: {
                                    text: 'aaa'
                                },
                                z: 100
                            }
                        ]
                    },
                    {
                        type: 'text',
                        bottom: 0,
                        left: 'center',
                        style: {
                            text: 'bbb'
                        },
                        z: 100
                    }
                ]
            });

            // Set option using getOption
            var option = this.chart.getOption();

            expect(option.graphic.length === 1).toEqual(true);
            var optionElements = option.graphic[0].elements;
            expect(optionElements && optionElements.length === 5).toEqual(true);

            expect(optionElements[0].id === 'uriimg' && optionElements[0].parentId == null).toEqual(true);
            expect(optionElements[1].id === 'gr' && optionElements[1].parentId == null).toEqual(true);
            expect(optionElements[2].name === 'rectxx' && optionElements[2].parentId === 'gr').toEqual(true);
            expect(optionElements[3].style.text === 'aaa' && optionElements[3].parentId === 'gr').toEqual(true);
            expect(optionElements[4].style.text === 'bbb' && optionElements[4].parentId == null).toEqual(true);
        });


        testCase.createChart()('groupSetOptionGetOption', function () {
            var chart = this.chart;

            chart.setOption({
                graphic: [
                    {
                        id: 'uriimg',
                        type: 'image',
                        name: 'nameuriimg',
                        origin: [20, 20],
                        left: 10,
                        top: 10,
                        style: {
                            image: imageURI,
                            width: 80,
                            height: 80,
                            opacity: 0.5
                        }
                    },
                    {
                        type: 'group',
                        id: 'gr',
                        width: 230,
                        height: 110,
                        position: [70, 90],
                        children: [
                            {
                                type: 'rect',
                                name: 'rectxx',
                                shape: {
                                    width: 230,
                                    height: 80
                                },
                                style: {
                                    stroke: 'red',
                                    fill: 'transparent',
                                    lineWidth: 2
                                },
                                z: 100
                            },
                            {
                                id: 'grouptext',
                                type: 'text',
                                bottom: 0,
                                right: 0,
                                rotation: 0.5,
                                style: {
                                    text: 'aaa'
                                },
                                z: 100
                            }
                        ]
                    },
                    {
                        type: 'text',
                        bottom: 0,
                        left: 'center',
                        style: {
                            text: 'bbb'
                        },
                        z: 100
                    }
                ]
            });

            checkExistsAndRelations();

            // Set option using getOption
            chart.setOption(this.chart.getOption());

            // Check again, should be the same as before.
            checkExistsAndRelations();

            function checkExistsAndRelations() {
                var els = utHelper.getGraphicElements(chart, 'graphic');

                expect(els.length === 6).toEqual(true);
                expect(els[0].type === 'group').toEqual(true);
                expect(els[1].name === 'nameuriimg').toEqual(true);

                expect(els[2].type === 'group').toEqual(true);
                var groupEls = utHelper.getGraphicElements(els[2], 'graphic');
                expect(groupEls.length === 2).toEqual(true);
                expect(groupEls[0] === els[3]).toEqual(true);
                expect(groupEls[1] === els[4]).toEqual(true);
                expect(els[3].name === 'rectxx').toEqual(true);
                expect(els[4].style.text === 'aaa').toEqual(true);

                expect(els[5].style.text === 'bbb').toEqual(true);
            }
        });


        testCase.createChart()('onlyOneGraphicComponentAvailable', function () {
            var chart = this.chart;

            chart.setOption({
                graphic: [
                    {
                        elements: [
                            {
                                type: 'circle',
                                shape: {
                                    cx: 50,
                                    cy: 50,
                                    r: 20
                                }
                            },
                            {
                                type: 'circle',
                                shape: {
                                    cx: 150,
                                    cy: 150,
                                    r: 20
                                }
                            }
                        ]
                    },
                    {
                        elements: [
                            {
                                type: 'circle',
                                shape: {
                                    cx: 100,
                                    cy: 100,
                                    r: 20
                                }
                            }
                        ]
                    }
                ]
            });

            expect(!!chart.getModel().getComponent('graphic')).toEqual(true);
            expect(chart.getModel().getComponent('graphic', 1) == null).toEqual(true);
        });


        testCase.createChart()('replace', function () {
            var chart = this.chart;

            chart.setOption({
                graphic: {
                    type: 'circle',
                    name: 'a',
                    shape: {
                        cx: 50,
                        cy: 50,
                        r: 20
                    },
                    style: {
                        fill: 'green',
                        stroke: 'pink',
                        lineWidth: 3
                    }
                }
            });

            var els = utHelper.getGraphicElements(chart, 'graphic');

            expect(els.length === 2).toEqual(true);
            expect(els[0].type === 'group').toEqual(true);
            expect(els[1].name === 'a' && els[1].type === 'circle').toEqual(true);

            chart.setOption({
                graphic: {
                    type: 'rect',
                    $action: 'replace',
                    name: 'b',
                    shape: {
                        x: 50,
                        y: 50,
                        width: 20,
                        height: 60
                    },
                    style: {
                        fill: 'green',
                        stroke: 'pink',
                        lineWidth: 3
                    }
                }
            });

            var els = utHelper.getGraphicElements(chart, 'graphic');

            expect(els.length === 2).toEqual(true);
            expect(els[0].type === 'group').toEqual(true);
            expect(els[1].name === 'b' && els[1].type === 'rect').toEqual(true);
            expect(els[1].shape && els[1].shape.width === 20).toEqual(true);
        });


        function getDeleteSourceOption() {
            return {
                graphic: [
                    {
                        type: 'text',
                        name: 'textname',
                        style: {
                            text: 'asdf哈呵',
                            font: '40px sans-serif',
                            x: 100,
                            y: 40
                        }
                    },
                    {
                        id: 'rrr',
                        name: 'ringname',
                        type: 'ring',
                        shape: {
                            cx: 50,
                            cy: 150,
                            r: 20,
                            r0: 5
                        }
                    },
                    {
                        id: 'xxx',
                        name: 'rectname',
                        type: 'rect',
                        shape: {
                            x: 250,
                            y: 50,
                            width: 20,
                            height: 80
                        }
                    }
                ]
            };
        }

        function checkDeteteSource(chart) {
            var els = utHelper.getGraphicElements(chart, 'graphic');
            expect(els.length === 4);
            expect(els[1].type === 'text' && els[1].name === 'textname').toEqual(true);
            expect(els[2].type === 'ring' && els[2].name === 'ringname').toEqual(true);
            expect(els[3].type === 'rect' && els[3].name === 'rectname').toEqual(true);
        }

        testCase.createChart()('deleteBy$action', function () {
            var chart = this.chart;

            chart.setOption(getDeleteSourceOption());

            checkDeteteSource(chart);

            chart.setOption({
                graphic: {
                    id: 'rrr',
                    $action: 'remove'
                }
            });

            var els = utHelper.getGraphicElements(chart, 'graphic');
            expect(els.length === 3);
            expect(els[1].type === 'text' && els[1].name === 'textname').toEqual(true);
            expect(els[2].type === 'rect' && els[2].name === 'rectname').toEqual(true);
        });

        testCase.createChart()('deleteBySetOptionNotMerge', function () {
            var chart = this.chart;

            chart.setOption(getDeleteSourceOption());

            checkDeteteSource(chart);

            chart.setOption({
                graphic: {
                    type: 'rect',
                    name: 'rectname2',
                    shape: {
                        y: 100,
                        x: 250,
                        width: 40,
                        height: 140
                    },
                    style: {
                        fill: 'blue'
                    }
                }
            }, true);

            var els = utHelper.getGraphicElements(chart, 'graphic');
            expect(els.length === 2);
            expect(els[1].type === 'rect' && els[1].name === 'rectname2').toEqual(true);
        });

        testCase.createChart()('deleteByClear', function () {
            var chart = this.chart;

            chart.setOption(getDeleteSourceOption());

            checkDeteteSource(chart);

            chart.clear();

            var els = utHelper.getGraphicElements(chart, 'graphic');
            expect(els.length === 0);
        });


        function checkMergeElements(chart, merged) {
            propHasAll(utHelper.getGraphicElements(chart, 'graphic'), [
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0,
                    style: {},
                    shape: {
                        x: !merged ? 250 : 350,
                        y: 50,
                        width: 20,
                        height: 80,
                        r: 0
                    }
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        fill: !merged ? 'yellow' : 'pink'
                    },
                    shape: {
                        x: 30,
                        y: 30,
                        width: 10,
                        height: 20,
                        r: 0
                    }
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0,
                    style: !merged
                        ? {}
                        : {
                            fill: 'green'
                        },
                    shape: {
                        cx: !merged ? 50 : 150,
                        cy: 150,
                        r: 20,
                        r0: 5
                    }
                }
            ]);
        }

        testCase.createChart()('mergeTroughFlatForamt', function () {
            var chart = this.chart;

            chart.setOption({
                graphic: [
                    {
                        type: 'rect',
                        shape: {
                            x: 250,
                            y: 50,
                            width: 20,
                            height: 80
                        }
                    },
                    {
                        type: 'group',
                        children: [
                            {
                                id: 'ing',
                                type: 'rect',
                                shape: {
                                    x: 30,
                                    y: 30,
                                    width: 10,
                                    height: 20
                                },
                                style: {
                                    fill: 'yellow'
                                }
                            }
                        ]
                    },
                    {
                        id: 'rrr',
                        type: 'ring',
                        shape: {
                            cx: 50,
                            cy: 150,
                            r: 20,
                            r0: 5
                        }
                    }
                ]
            });

            checkMergeElements(chart);

            chart.setOption({
                graphic: [
                    {
                        shape: {
                            x: 350
                        }
                    },
                    {
                        id: 'rrr',
                        shape: {
                            cx: 150
                        },
                        style: {
                            fill: 'green'
                        }
                    },
                    // flat mode
                    {
                        id: 'ing',
                        style: {
                            fill: 'pink'
                        }
                    }
                ]
            });

            checkMergeElements(chart, true);
        });


    });










    describe('groupLRTB', function() {

        function getOption() {
            return {
                graphic: [
                    {
                        type: 'text',
                        bottom: 0,
                        right: 0,
                        rotation: Math.PI / 4,
                        style: {
                            font: '24px Microsoft YaHei',
                            text: '全屏右下角'
                        },
                        z: 100
                    },
                    {
                        id: 'uriimg',
                        type: 'image',
                        origin: [20, 20],
                        left: 10,
                        top: 10,
                        style: {
                            image: imageURI,
                            width: 80,
                            height: 80,
                            opacity: 0.5
                        }
                    },
                    {
                        type: 'group',
                        id: 'gr',
                        width: 230,
                        height: 110,
                        position: [70, 90],
                        children: [
                            {
                                type: 'rect',
                                shape: {
                                    width: 230,
                                    height: 80
                                },
                                style: {
                                    stroke: 'red',
                                    fill: 'transparent',
                                    lineWidth: 2
                                },
                                z: 100
                            },
                            {
                                type: 'rect',
                                shape: {
                                    width: 60,
                                    height: 110
                                },
                                style: {
                                    stroke: 'red',
                                    fill: 'transparent',
                                    lineWidth: 2
                                },
                                z: 100
                            },
                            {
                                id: 'grouptext',
                                type: 'text',
                                bottom: 0,
                                right: 0,
                                rotation: 0.5,
                                style: {
                                    font: '14px Microsoft YaHei',
                                    text: 'group最右下角'
                                },
                                z: 100
                            }
                        ]
                    },
                    {
                        type: 'text',
                        bottom: 0,
                        left: 'center',
                        style: {
                            font: '18px sans-serif',
                            text: '全屏最下中间\n这是多行文字\n这是第三行'
                        },
                        z: 100
                    }
                ]
            };
        }

        function checkLocations(chart, uriimgChanged) {
            propHasAll(utHelper.getGraphicElements(chart, 'graphic'), [
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0
                },
                {
                    position: [98.17662350913716, 133.02943725152284],
                    scale: [1, 1],
                    rotation: 0.7853981633974483,
                    style: {
                        font: '24px Microsoft YaHei',
                        text: '全屏右下角',
                        textVerticalAlign: null
                    }
                },
                !uriimgChanged
                    ? {
                        position: [10, 10],
                        scale: [1, 1],
                        rotation: 0,
                        style: {
                            height: 80,
                            opacity: 0.5,
                            width: 80,
                            image: imageURI
                        }
                    }
                    : {
                        position: [61, 45],
                        scale: [1, 1],
                        rotation: 0,
                        style: {
                            height: 60,
                            opacity: 0.5,
                            width: 78,
                            image: imageURI
                        }
                    },
                {
                    position: [70, 90],
                    scale: [1, 1],
                    rotation: 0
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        stroke: 'red',
                        fill: 'transparent',
                        lineWidth: 2
                    },
                    shape: {
                        width: 230,
                        height: 80,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        stroke: 'red',
                        fill: 'transparent',
                        lineWidth: 2
                    },
                    shape: {
                        width: 60,
                        height: 110,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: [145.47972137162424, 97.71384413353478],
                    scale: [1, 1],
                    rotation: 0.5,
                    style: {
                        font: '14px Microsoft YaHei',
                        text: 'group最右下角',
                        textVerticalAlign: null
                    }
                },
                {
                    position: [46, 96],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        font: '18px sans-serif',
                        text: '全屏最下中间\n这是多行文字\n这是第三行',
                        textVerticalAlign: null
                    }
                }
            ]);
        }

        function checkResizedLocations(chart) {
            propHasAll(utHelper.getGraphicElements(chart, 'graphic'), [
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0
                },
                {
                    position: [98.17662350913716, 133.02943725152286],
                    scale: [1, 1],
                    rotation: 0.7853981633974483,
                    style: {
                        font: '24px Microsoft YaHei',
                        text: '全屏右下角',
                        textVerticalAlign: null
                    }
                },
                {
                    position: [10, 10],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        image: imageURI,
                        width: 80,
                        height: 80,
                        opacity: 0.5
                    }
                },
                {
                    position: [70, 90],
                    scale: [1, 1],
                    rotation: 0
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        stroke: 'red',
                        fill: 'transparent',
                        lineWidth: 2
                    },
                    shape: {
                        width: 230,
                        height: 80,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        stroke: 'red',
                        fill: 'transparent',
                        lineWidth: 2
                    },
                    shape: {
                        width: 60,
                        height: 110,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: [145.47972137162424, 97.71384413353478],
                    scale: [1, 1],
                    rotation: 0.5,
                    style: {
                        font: '14px Microsoft YaHei',
                        text: 'group最右下角',
                        textVerticalAlign: null
                    }
                },
                {
                    position: [46, 96],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        font: '18px sans-serif',
                        text: '全屏最下中间\n这是多行文字\n这是第三行',
                        textVerticalAlign: null
                    }
                }
            ]);
        }

        testCase.createChart(1, 200, 150)('getAndGet', function () {
            var chart = this.chart;

            chart.setOption(getOption());

            checkLocations(chart);

            // Set option using getOption
            chart.setOption(this.chart.getOption());

            // Check again, should be the same as before.
            checkLocations(chart);
        });

        // Test modify location by setOption.
        // And test center and middle.
        testCase.createChart(1, 200, 150)('modifyAndCenter', function () {
            var chart = this.chart;

            chart.setOption(getOption());

            checkLocations(chart);

            chart.setOption({
                graphic: [{
                    id: 'uriimg',
                    left: 'center',
                    top: 'middle',
                    style: {
                        width: 78,
                        height: 60
                    }
                }]
            });

            checkLocations(chart, true);
        });

        testCase.createChart(1, 200, 150)('resize', function () {
            var chart = this.chart;

            chart.setOption(getOption());

            checkLocations(chart);

            chart.resize(220, 300);

            checkResizedLocations(chart);
        });
    });







    describe('boundingAndRotation', function() {

        function getOption() {
            return {
                legend: {
                    data:['高度(km)与气温(°C)变化关系']
                },
                xAxis: {
                },
                yAxis: {
                    type: 'category',
                    data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
                },
                graphic: [
                    {
                        type: 'image',
                        id: 'img',
                        z: -10,
                        right: 0,
                        top: 0,
                        bounding: 'raw',
                        origin: [75, 75],
                        style: {
                            fill: '#000',
                            image: imageURI,
                            width: 150,
                            height: 150,
                            opacity: 0.4
                        }
                    },
                    {
                        type: 'group',
                        id: 'rectgroup1',
                        bottom: 0,
                        right: 0,
                        bounding: 'raw',
                        children: [
                            {
                                type: 'rect',
                                left: 'center',
                                top: 'center',
                                shape: {
                                    width: 20,
                                    height: 80
                                },
                                style: {
                                    stroke: 'green',
                                    fill: 'transparent'
                                }
                            },
                            {
                                type: 'rect',
                                left: 'center',
                                top: 'center',
                                shape: {
                                    width: 80,
                                    height: 20
                                },
                                style: {
                                    stroke: 'green',
                                    fill: 'transparent'
                                }
                            }
                        ]
                    },
                    {
                        type: 'rect',
                        id: 'rect2',
                        bottom: 0,
                        right: 'center',
                        shape: {
                            width: 50,
                            height: 80
                        },
                        style: {
                            stroke: 'green',
                            fill: 'transparent'
                        }
                    },
                    {
                        type: 'group',
                        id: 'textGroup1',
                        left: '10%',
                        top: 'center',
                        scale: [1, 0.5],
                        children: [
                            {
                                type: 'rect',
                                z: 100,
                                left: 'center',
                                top: 'center',
                                shape: {
                                    width: 170,
                                    height: 70
                                },
                                style: {
                                    fill: '#fff',
                                    stroke: '#999',
                                    lineWidth: 2,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.3)'
                                }
                            },
                            {
                                type: 'text',
                                z: 100,
                                top: 'middle',
                                left: 'center',
                                style: {
                                    text: [
                                        '横轴表示温度，单位是°C',
                                        '纵轴表示高度，单位是km',
                                        '右上角有一个图片做的水印'
                                    ].join('\n'),
                                    font: '12px Microsoft YaHei'
                                }
                            }
                        ]
                    }
                ],
                series: [
                    {
                        name: '高度(km)与气温(°C)变化关系',
                        type: 'line',
                        data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
                    }
                ]
            };
        }

        function checkLocations(chart, rotated) {
            propHasAll(utHelper.getGraphicElements(chart, 'graphic'), [
                {
                    position: [0, 0],
                    scale: [1, 1],
                    rotation: 0
                },
                {
                    position: [350, 0],
                    scale: [1, 1],
                    rotation: !rotated ? 0 : 0.6283185307179586,
                    style: {
                        fill: '#000',
                        image: imageURI,
                        width: 150,
                        height: 150,
                        opacity: 0.4
                    }
                },
                {
                    position: [500, 400],
                    scale: [1, 1],
                    rotation: !rotated ? 0 : 0.6283185307179586
                },
                {
                    position: [-10, -40],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        stroke: 'green',
                        fill: 'transparent'
                    },
                    shape: {
                        width: 20,
                        height: 80,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: [-40, -10],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        stroke: 'green',
                        fill: 'transparent'
                    },
                    shape: {
                        width: 80,
                        height: 20,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: !rotated ? [225, 319.5] : [206.2631650489274, 334.5802393266705],
                    scale: [1, 1],
                    rotation: !rotated ? 0 : 0.6283185307179586,
                    style: {
                        stroke: 'green',
                        fill: 'transparent'
                    },
                    shape: {
                        width: 50,
                        height: 80,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: !rotated ? [136, 200] : [130.15559605751, 200],
                    scale: [1, 0.5],
                    rotation: !rotated ? 0 : 0.6283185307179586
                },
                {
                    position: [-85, -35],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        fill: '#fff',
                        stroke: '#999',
                        lineWidth: 2,
                        shadowBlur: 8,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        shadowColor: 'rgba(0,0,0,0.3)'
                    },
                    shape: {
                        width: 170,
                        height: 70,
                        r: 0,
                        x: 0,
                        y: 0
                    }
                },
                {
                    position: [-72, -18],
                    scale: [1, 1],
                    rotation: 0,
                    style: {
                        text: '横轴表示温度，单位是°C\n纵轴表示高度，单位是km\n右上角有一个图片做的水印',
                        font: '12px Microsoft YaHei',
                        textVerticalAlign: null
                    }
                }
            ]);
        }

        testCase.createChart()('bounding', function () {
            var chart = this.chart;

            chart.setOption(getOption());

            checkLocations(chart);

            // Set option using getOption
            chart.setOption(this.chart.getOption());

            // Check again, should be the same as before.
            checkLocations(chart);

            var rotation = Math.PI / 5;

            chart.setOption({
                graphic: [{
                    id: 'img',
                    bounding: 'raw',
                    origin: [75, 75],
                    rotation: rotation
                }, {
                    id: 'rectgroup1',
                    rotation: rotation
                }, {
                    id: 'rect2',
                    rotation: rotation
                }, {
                    id: 'textGroup1',
                    rotation: rotation
                }]
            });

            checkLocations(chart, true);

        });

    });

});
