| Index: test/codegen/lib/html/element_dimensions_test.dart
|
| diff --git a/test/codegen/lib/html/element_dimensions_test.dart b/test/codegen/lib/html/element_dimensions_test.dart
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..413d302a68388288506398d541872ca7e616c3dd
|
| --- /dev/null
|
| +++ b/test/codegen/lib/html/element_dimensions_test.dart
|
| @@ -0,0 +1,263 @@
|
| +// Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
|
| +// for details. All rights reserved. Use of this source code is governed by a
|
| +// BSD-style license that can be found in the LICENSE file
|
| +
|
| +library element_dimensions_test;
|
| +import 'package:unittest/unittest.dart';
|
| +import 'package:unittest/html_config.dart';
|
| +import 'dart:html';
|
| +
|
| +main() {
|
| + useHtmlConfiguration();
|
| +
|
| + var isElement = predicate((x) => x is Element, 'is an Element');
|
| + var isCanvasElement =
|
| + predicate((x) => x is CanvasElement, 'is a CanvasElement');
|
| + var isDivElement = predicate((x) => x is DivElement, 'is a isDivElement');
|
| +
|
| + var div = new DivElement();
|
| + div.id = 'test';
|
| + document.body.nodes.add(div);
|
| +
|
| + void initDiv() {
|
| + var style = div.style;
|
| + style..padding = '4px'
|
| + ..border = '0px solid #fff'
|
| + ..margin = '6px'
|
| + ..height = '10px'
|
| + ..width = '11px'
|
| + ..boxSizing = 'content-box'
|
| + ..overflow = 'visible';
|
| + }
|
| +
|
| + div.nodes.addAll([
|
| + new DivElement(),
|
| + new CanvasElement(),
|
| + new DivElement(),
|
| + new Text('Hello'),
|
| + new DivElement(),
|
| + new Text('World'),
|
| + new CanvasElement()]);
|
| +
|
| + group('dimensions', () {
|
| + setUp(initDiv);
|
| +
|
| + test('contentEdge.height', () {
|
| + var all1 = queryAll('#test');
|
| +
|
| + expect(all1.contentEdge.height, 10);
|
| + expect(all1[0].getComputedStyle().getPropertyValue('height'), '10px');
|
| +
|
| + all1.contentEdge.height = new Dimension.px(600);
|
| + all1.contentEdge.height = 600;
|
| + expect(all1.contentEdge.height, 600);
|
| + expect(all1[0].getComputedStyle().getPropertyValue('height'), '600px');
|
| + all1[0].style.visibility = 'hidden';
|
| + expect(all1.contentEdge.height, 600);
|
| + all1[0].style.visibility = 'visible';
|
| +
|
| + // If user passes in a negative number, set height to 0.
|
| + all1.contentEdge.height = new Dimension.px(-1);
|
| + expect(all1.contentEdge.height, 0);
|
| +
|
| + // Adding padding or border shouldn't affect the height for
|
| + // non-box-sizing.
|
| + div.style.padding = '20pc';
|
| + expect(all1.contentEdge.height, 0);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.contentEdge.height, 0);
|
| + });
|
| +
|
| + test('contentEdge.height with border-box', () {
|
| + var all1 = queryAll('#test');
|
| + div.style.boxSizing = 'border-box';
|
| + expect(all1.contentEdge.height, 2);
|
| + div.style.padding = '20pc';
|
| + expect(all1.contentEdge.height, 0);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.contentEdge.height, 0);
|
| + });
|
| +
|
| + test('contentEdge.width', () {
|
| + var all1 = queryAll('#test');
|
| + expect(all1.contentEdge.width, 11);
|
| + expect(all1[0].getComputedStyle().getPropertyValue('width'), '11px');
|
| +
|
| + all1.contentEdge.width = new Dimension.px(600);
|
| + expect(all1.contentEdge.width, 600);
|
| + expect(all1[0].getComputedStyle().getPropertyValue('width'), '600px');
|
| + all1[0].style.visibility = 'hidden';
|
| + expect(all1.contentEdge.width, 600);
|
| + all1[0].style.visibility = 'visible';
|
| +
|
| + // If user passes in a negative number, set width to 0.
|
| + all1.contentEdge.width = new Dimension.px(-1);
|
| + expect(all1.contentEdge.width, 0);
|
| +
|
| + // Adding padding or border shouldn't affect the width.
|
| + div.style.padding = '20pc';
|
| + expect(all1.contentEdge.width, 0);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.contentEdge.width, 0);
|
| + });
|
| +
|
| + test('contentEdge.width with border-box', () {
|
| + var all1 = queryAll('#test');
|
| + div.style.boxSizing = 'border-box';
|
| + expect(all1.contentEdge.width, 3);
|
| + div.style.padding = '20pc';
|
| + expect(all1.contentEdge.width, 0);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.contentEdge.width, 0);
|
| +
|
| + });
|
| +
|
| + test('paddingEdge.height', () {
|
| + var all1 = queryAll('#test');
|
| + expect(all1.paddingEdge.height, 18);
|
| + all1[0].style.visibility = 'hidden';
|
| + expect(all1.paddingEdge.height, 18);
|
| + all1[0].style.visibility = 'visible';
|
| +
|
| + // Adding border shouldn't affect the paddingEdge.height.
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.paddingEdge.height, 18);
|
| + // Adding padding should affect the paddingEdge.height.
|
| + div.style.padding = '20pc';
|
| + expect(all1.paddingEdge.height, 650);
|
| + });
|
| +
|
| + test('paddingEdge.height with border-box', () {
|
| + var all1 = queryAll('#test');
|
| + div.style.boxSizing = 'border-box';
|
| + expect(all1.paddingEdge.height, 10);
|
| + div.style.padding = '20pc';
|
| + expect(all1.paddingEdge.height, 640);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.paddingEdge.height, 640);
|
| + });
|
| +
|
| + test('paddingEdge.width', () {
|
| + var all1 = queryAll('#test');
|
| + expect(all1.paddingEdge.width, 19);
|
| + all1[0].style.visibility = 'hidden';
|
| + expect(all1.paddingEdge.width, 19);
|
| + all1[0].style.visibility = 'visible';
|
| +
|
| + // Adding border shouldn't affect the width.
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.paddingEdge.width, 19);
|
| +
|
| + // Adding padding should affect the paddingEdge.width.
|
| + div.style.padding = '20pc';
|
| + expect(all1.paddingEdge.width, 651);
|
| + });
|
| +
|
| + test('paddingEdge.width with border-box', () {
|
| + var all1 = queryAll('#test');
|
| + div.style.boxSizing = 'border-box';
|
| + expect(all1.paddingEdge.width, 11);
|
| + div.style.padding = '20pc';
|
| + expect(all1.paddingEdge.width, 640);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.paddingEdge.width, 640);
|
| + });
|
| +
|
| + test('borderEdge.height and marginEdge.height', () {
|
| + var all1 = queryAll('#test');
|
| + expect(div.borderEdge.height, 18);
|
| + expect(div.marginEdge.height, 30);
|
| + expect(all1.borderEdge.height, 18);
|
| + expect(all1.marginEdge.height, 30);
|
| + all1[0].style.visibility = 'hidden';
|
| + expect(all1.borderEdge.height, 18);
|
| + all1[0].style.visibility = 'visible';
|
| +
|
| + // Adding border should affect the borderEdge.height.
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.borderEdge.height, 22);
|
| + // Adding padding should affect the borderEdge.height.
|
| + div.style.padding = '20pc';
|
| + expect(all1.borderEdge.height, 654);
|
| + expect(all1.marginEdge.height, 666);
|
| + });
|
| +
|
| +
|
| + test('borderEdge.height and marginEdge.height with border-box', () {
|
| + var all1 = queryAll('#test');
|
| + div.style.boxSizing = 'border-box';
|
| + expect(all1.borderEdge.height, 10);
|
| + expect(all1.marginEdge.height, 22);
|
| + div.style.padding = '20pc';
|
| + expect(all1.borderEdge.height, 640);
|
| + expect(all1.marginEdge.height, 652);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.borderEdge.height, 644);
|
| + expect(all1.marginEdge.height, 656);
|
| + });
|
| +
|
| + test('borderEdge.width and marginEdge.width', () {
|
| + var all1 = queryAll('#test');
|
| + expect(all1.borderEdge.width, 19);
|
| + expect(all1.marginEdge.width, 31);
|
| +
|
| + // Adding border should affect the width.
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.borderEdge.width, 23);
|
| +
|
| + // Adding padding should affect the borderEdge.width.
|
| + div.style.padding = '20pc';
|
| + expect(all1.borderEdge.width, 655);
|
| + expect(all1.marginEdge.width, 667);
|
| + });
|
| +
|
| + test('borderEdge.width and marginEdge.width with border-box', () {
|
| + var all1 = queryAll('#test');
|
| + div.style.boxSizing = 'border-box';
|
| + expect(all1.borderEdge.width, 11);
|
| + expect(all1.marginEdge.width, 23);
|
| + div.style.padding = '20pc';
|
| + expect(all1.borderEdge.width, 640);
|
| + expect(all1.marginEdge.width, 652);
|
| + div.style.border = '2px solid #fff';
|
| + expect(all1.borderEdge.width, 644);
|
| + expect(all1.marginEdge.width, 656);
|
| + });
|
| +
|
| + test('left and top', () {
|
| + div.style.border = '1px solid #fff';
|
| + div.style.margin = '6px 7px';
|
| + div.style.padding = '4px 5px';
|
| + var all1 = queryAll('#test');
|
| +
|
| + expect(all1.borderEdge.left, all1[0].getBoundingClientRect().left);
|
| + expect(all1.borderEdge.top, all1[0].getBoundingClientRect().top);
|
| +
|
| + expect(all1.contentEdge.left,
|
| + all1[0].getBoundingClientRect().left + 1 + 5);
|
| + expect(all1.contentEdge.top, all1[0].getBoundingClientRect().top + 1 + 4);
|
| +
|
| + expect(all1.marginEdge.left, all1[0].getBoundingClientRect().left - 7);
|
| + expect(all1.marginEdge.top, all1[0].getBoundingClientRect().top - 6);
|
| +
|
| + expect(all1.paddingEdge.left, all1[0].getBoundingClientRect().left + 1);
|
| + expect(all1.paddingEdge.top, all1[0].getBoundingClientRect().top + 1);
|
| + });
|
| +
|
| + test('setHeight ElementList', () {
|
| + div.style.border = '1px solid #fff';
|
| + div.style.margin = '6px 7px';
|
| + div.style.padding = '4px 5px';
|
| + var all1 = queryAll('div');
|
| + all1.contentEdge.height = new Dimension.px(200);
|
| + all1.contentEdge.height = 200;
|
| + for (Element elem in all1) {
|
| + expect(elem.contentEdge.height, 200);
|
| + }
|
| + all1.contentEdge.height = new Dimension.px(10);
|
| + for (Element elem in all1) {
|
| + expect(elem.contentEdge.height, 10);
|
| + }
|
| + });
|
| + });
|
| +}
|
|
|