RaymondLim/test-active-line.htm

## test-active-line.htm
<!doctype html>
<html>
  <head>
    <title>Active line repaint bug</title>
    <link rel="stylesheet" href="lib/codemirror.css">
    <script src="lib/codemirror.js"></script>
    <script src="addon/selection/active-line.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="doc/docs.css">

    <style type="text/css">
      .CodeMirror {border: 1px solid black; height: 300px;}
      .CodeMirror-activeline-background {background: #e8f2ff !important;}
    </style>
  </head>
  <body>
    <h1>Active line repaint bug</h1>

    <div id="editor"></div>
    <form>
    <input type="button" value="Reset Text" id="reset">
    </form>
    <script id="script">
      var editor;
      window.onload = function() {
        var content = "";	// Only an initial empty content causes this bug.

        editor = CodeMirror(document.getElementById("editor"), {
          lineNumbers: true,
          styleActiveLine: true,
          value: content
        });
      };

      $(document).ready(function() {
        $("#reset").click(function(event) {
          // Intentionally having extra empty lines in the new content.
          // If you take them out, then no bug.
          editor.setValue("This is just a test on replacing text.\nsecond line\nthird line\n\n\n");

          // If you change cursor NOT to be 0,0, then you won't see the issue.
          //editor.setCursor({line: 0, ch: 0});
        });
      });

    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Active line repaint bug</title>
	<link rel="stylesheet" href="lib/codemirror.css">
	<script src="lib/codemirror.js"></script>
	<script src="addon/selection/active-line.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<link rel="stylesheet" href="doc/docs.css">

	<style type="text/css">
	.CodeMirror {border: 1px solid black; height: 300px;}
	.CodeMirror-activeline-background {background: #e8f2ff !important;}
	</style>
	</head>
	<body>
	<h1>Active line repaint bug</h1>

	<div id="editor"></div>
	<form>
	<input type="button" value="Reset Text" id="reset">
	</form>
	<script id="script">
	var editor;
	window.onload = function() {
	var content = ""; // Only an initial empty content causes this bug.

	editor = CodeMirror(document.getElementById("editor"), {
	lineNumbers: true,
	styleActiveLine: true,
	value: content
	});
	};

	$(document).ready(function() {
	$("#reset").click(function(event) {
	// Intentionally having extra empty lines in the new content.
	// If you take them out, then no bug.
	editor.setValue("This is just a test on replacing text.\nsecond line\nthird line\n\n\n");

	// If you change cursor NOT to be 0,0, then you won't see the issue.
	//editor.setCursor({line: 0, ch: 0});
	});
	});

	</script>
	</body>
	</html>