Add test case for text style cache bug.

test/axisLabel.html

@@ -26,6 +26,8 @@ under the License.
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <script src="ut/lib/canteen.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="stylesheet" href="lib/reset.css">
     </head>
@@ -38,9 +40,10 @@ under the License.
                 height: 400px;
             }
         </style>
-        <div class="chart" id="main1"></div>
+        <!-- <div class="chart" id="main1"></div>
         <div class="chart" id="main2"></div>
-        <div class="chart" id="main3"></div>
+        <div class="chart" id="main3"></div> -->
+        <div class="chart" id="main4"></div>
 
 
 
@@ -257,7 +260,11 @@ under the License.
             require([
                 'echarts'
             ], function (echarts) {
-                var chart = echarts.init(document.getElementById('main3'));
+                var el = document.getElementById('main3');
+                if (!el) {
+                    return;
+                }
+                var chart = echarts.init(el);
                 var rotate = 30;
 
                 option = {
@@ -302,5 +309,75 @@ under the License.
 
         </script>
 
+
+
+
+
+
+
+
+        <script>
+
+            var chart;
+            var myChart;
+            var option;
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var option = {
+                    backgroundColor: '#eee',
+                    "xAxis": {
+                        "type": "category",
+                        "data": [
+                            "2018-10-08",
+                            "2018-10-09"
+                        ]
+                    },
+                    "yAxis": {
+                        "type": "value",
+                        "axisLabel": {
+                            "color": "red",
+                            formatter: function (value, index) {
+                                if (index === 0){
+                                    // Used to make yAxis label not show (a bug).
+                                    return '';
+                                } else {
+                                    return value + '';
+                                }
+                            }
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                        "z": 3
+                    },
+                    animation: false,
+                    "tooltip": {
+                        "trigger": "axis"
+                    },
+                    "series": [
+                        {
+                            "type": "line",
+                            "data": [
+                                1231212,
+                                32341323
+                            ]
+                        }
+                    ]
+                }
+
+                testHelper.create(echarts, 'main4', {
+                    title: 'Label of yAxis should be RED, but 0 label does not display',
+                    option: option,
+                    recordCanvas: true
+                });
+            });
+
+        </script>
+
+
+
     </body>
 </html>
\ No newline at end of file

test/lib/reset.css

@@ -107,3 +107,19 @@ td.test-data-table-key {
     font-size: 12px;
     color: rgb(69, 162, 238)
 }
+
+.record-canvas .content-area {
+    display: none;
+    position: absolute;
+    background: #fff;
+    left: 10px;
+    top: 20px;
+    border: 2px solid #000;
+    padding: 10px;
+    z-index: 9999;
+    box-shadow: 0 0 3px #000;
+}
+.record-canvas textarea {
+    width: 300px;
+    height: 500px;
+}

test/lib/testHelper.js

@@ -55,6 +55,7 @@
      * @param {boolean} [opt.notMerge]
      * @param {Array.<Object>|Object} [opt.button] {text: ..., onClick: ...}, or an array of them.
      * @param {Array.<Object>|Object} [opt.buttons] {text: ..., onClick: ...}, or an array of them.
+     * @param {boolean} [opt.recordCanvas] 'ut/lib/canteen.js' is required.
      */
     testHelper.create = function (echarts, domOrId, opt) {
         var dom = getDom(domOrId);
@@ -69,6 +70,7 @@
         var buttonsContainer = document.createElement('div');
         var dataTableContainer = document.createElement('div');
         var infoContainer = document.createElement('div');
+        var recordCanvasContainer = document.createElement('div');
 
         title.setAttribute('title', dom.getAttribute('id'));
 
@@ -79,12 +81,14 @@
         buttonsContainer.className = 'test-buttons';
         dataTableContainer.className = 'test-data-table';
         infoContainer.className = 'test-info';
+        recordCanvasContainer.className = 'record-canvas';
 
         if (opt.info) {
             dom.className += ' test-chart-block-has-right';
             infoContainer.className += ' test-chart-block-right';
         }
 
+        left.appendChild(recordCanvasContainer);
         left.appendChild(buttonsContainer);
         left.appendChild(dataTableContainer);
         left.appendChild(chartContainer);
@@ -142,11 +146,70 @@
             infoContainer.innerHTML = createObjectHTML(opt.info, opt.infoKey || 'option');
         }
 
+        if (opt.recordCanvas) {
+            recordCanvasContainer.innerHTML = ''
+                + '<button>Show Canvas Record</button>'
+                + '<button>Clear Canvas Record</button>'
+                + '<div class="content-area"><textarea></textarea><br><button>Close</button></div>';
+            var buttons = recordCanvasContainer.getElementsByTagName('button');
+            var canvasRecordButton = buttons[0];
+            var clearButton = buttons[1];
+            var closeButton = buttons[2];
+            var recordArea = recordCanvasContainer.getElementsByTagName('textarea')[0];
+            var contentAraa = recordArea.parentNode;
+            canvasRecordButton.addEventListener('click', function () {
+                var content = [];
+                eachCtx(function (zlevel, ctx) {
+                    content.push('Layer zlevel: ' + zlevel, '\n\n');
+                    if (typeof ctx.stack !== 'function') {
+                        alert('Missing: <script src="ut/lib/canteen.js"></script>');
+                        return;
+                    }
+                    var stack = ctx.stack();
+                    for (var i = 0; i < stack.length; i++) {
+                        var line = stack[i];
+                        content.push(JSON.stringify(line), '\n');
+                    }
+                });
+                contentAraa.style.display = 'block';
+                recordArea.value = content.join('');
+            });
+            clearButton.addEventListener('click', function () {
+                eachCtx(function (zlevel, ctx) {
+                    ctx.clear();
+                });
+                recordArea.value = 'Cleared.';
+            });
+            closeButton.addEventListener('click', function () {
+                contentAraa.style.display = 'none';
+            });
+        }
+
+        function eachCtx(cb) {
+            var layers = chart.getZr().painter.getLayers();
+            for (var zlevel in layers) {
+                if (layers.hasOwnProperty(zlevel)) {
+                    var layer = layers[zlevel];
+                    var canvas = layer.dom;
+                    var ctx = canvas.getContext('2d');
+                    cb(zlevel, ctx);
+                }
+            }
+        }
+
         return chart;
     };
 
     /**
-     * opt: {boolean}: lazyUpdate, {boolean}: notMerge, {number}: height, {Object}: {width, height, draggable}
+     * @param {ECharts} echarts
+     * @param {HTMLElement|string} domOrId
+     * @param {Object} option
+     * @param {boolean|number} opt If number, means height
+     * @param {boolean} opt.lazyUpdate
+     * @param {boolean} opt.notMerge
+     * @param {number} opt.width
+     * @param {number} opt.height
+     * @param {boolean} opt.draggable
      */
     testHelper.createChart = function (echarts, domOrId, option, opt) {
         if (typeof opt === 'number') {