Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1756)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: tests/html/element_dimensions_test.dart

Issue 19786005: Reapply Box Model convenience classes (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « sdk/lib/html/dartium/html_dartium.dart ('k') | tools/dom/src/CssRectangle.dart » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: tests/html/element_dimensions_test.dart
diff --git a/tests/html/element_dimensions_test.dart b/tests/html/element_dimensions_test.dart
new file mode 100644
index 0000000000000000000000000000000000000000..413d302a68388288506398d541872ca7e616c3dd
--- /dev/null
+++ b/tests/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);
+ }
+ });
+ });
+}
« no previous file with comments | « sdk/lib/html/dartium/html_dartium.dart ('k') | tools/dom/src/CssRectangle.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698