Last night I found an HTML5 display issue in the Dart of the ICE Code Editor. All of the DOM elements in the ICE Code Editor are absolutely or relatively positioned. For some reason in HTML5 that means that the body element has a zero pixel height.
I fixed the issue by explicitly setting both the
<html> and <body> heights: // Both of these height settings are required for ICE to play nicely
// with HTML5 documents
document.documentElement.style.height = '100%';
document.body.style.height = '100%';Since this particular issue is an HTML5 one, I need an HTML5 test context. So I create
html5.html with:<!DOCTYPE html>
<html>
<head>
<script type="application/dart" src="html5_test.dart"></script>
<script type='text/javascript'>
// JS for posting messages to inform runner that tests are complete
</script>
<script src="packages/browser/dart.js"></script>
</head>
</html>
The complete test is fairly straight-forward, mostly thanks to copying and pasting from the main ice_test.dart file. The html5_test.dart file contains only a single test that checks the height of the editor after load:library ice_html5_test;
import 'package:unittest/unittest.dart';
import 'dart:html';
import 'dart:async';
import 'helpers.dart' as helpers;
import 'package:ice_code_editor/ice.dart';
main() {
group("HTML5", (){
group("Full Screen ICE", (){
// tearDown(()=> document.query('#ice').remove());
test("the editor is full-screen", (){
var it = new Full(enable_javascript_mode: false);
_test(_) {
var el = document.query('#ice');
var editor_el = el.query('.ice-code-editor-editor');
expect(editor_el.clientWidth, window.innerWidth);
expect(editor_el.clientHeight, closeTo(window.innerHeight,1.0));
expect(document.body.clientHeight, greaterThan(10));
};
it.editorReady.then(expectAsync1(_test));
});
});
});
}And that actually works. If I remove my new code, I get failures:FAIL: HTML5 Full Screen ICE the editor is full-screen
Expected: a numeric value within <1.0> of <288>
But: differed by <288>.
Actual: <0>But with my new code, the test passes. NiceSince this requires separate browser context than my normal tests, I need to run it separately in my
test_runner.sh, but that is not a big deal. That minor bother aside, it is quite nice that it is so easy to test rendering bugs in Dart.Day #780
No comments:
Post a Comment