tests/lib_2/html/cssstyledeclaration_test.dart

// Copyright (c) 2011, 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.

// @dart = 2.9

library CssStyleDeclarationTest;

import 'dart:async';
import 'dart:html';

import 'package:async_helper/async_minitest.dart';

import 'utils.dart';

main() {
  createTestStyle() {
    return new CssStyleDeclaration.css("""
      color: blue;
      width: 2px !important;
    """);
  }

  ;

  test('default constructor is empty', () {
    var style = new CssStyleDeclaration();
    expect(style.cssText.isEmpty, isTrue);
    expect(style.getPropertyPriority('color').isEmpty, isTrue);
    expect(style.item(0).isEmpty, isTrue);
    expect(style.length, 0);
    // These assertions throw a UnimplementedError in dartium:
    // expect(style.parentRule, isNull);
    // expect(style.getPropertyCssValue('color'), isNull);
    // expect(style.getPropertyShorthand('color'), isNull);
  });

  test('length is wrapped', () {
    expect(createTestStyle().length, 2);
  });

  test('getPropertyPriority is wrapped', () {
    var style = createTestStyle();
    expect(style.getPropertyPriority("color").isEmpty, isTrue);
    expect(style.getPropertyPriority("width"), equals("important"));
  });

  test('removeProperty is wrapped', () {
    var style = createTestStyle();
    style.removeProperty("width");
    expect(style.cssText.trim(), equals("color: blue;"));
  });

  test('CSS property empty getters and setters', () {
    var style = createTestStyle();
    expect(style.border, equals(""));

    style.border = "1px solid blue";
    style.border = "";
    expect(style.border, equals(""));

    style.border = "1px solid blue";
    style.border = null;
    expect(style.border, equals(""));
  });

  test('CSS property getters and setters', () {
    var style = createTestStyle();
    expect(style.color, equals("blue"));
    expect(style.width, equals("2px"));

    style.color = "red";
    style.transform = "translate(10px, 20px)";

    expect(style.color, equals("red"));
    expect(style.transform, equals("translate(10px, 20px)"));
  });

  test('Browser prefixes', () {
    var element = new DivElement();
    element.style.transform = 'translateX(10px)';
    document.body.children.add(element);

    var style = element.getComputedStyle();
    // Some browsers will normalize this, so it'll be a matrix rather than
    // the original string. Just check that it's something other than null.
    expect(style.transform.length, greaterThan(3));
  });

  // IE9 requires an extra poke for some properties to get applied.
  test('IE9 Invalidation', () {
    var element = new DivElement();
    document.body.children.add(element);

    // Need to wait one tick after the element has been added to the page.
    new Timer(const Duration(milliseconds: 10), expectAsync(() {
      element.style.textDecoration = 'underline';
      var style = element.getComputedStyle();
      expect(style.textDecoration.contains('underline'), isTrue);
    }));
  });

  test('Invalid values', () {
    var element = new DivElement();
    // Should not throw an error.
    element.style.background = 'some_bad_value';
  });

  test('css multi get', () {
    var listElement = new Element.html(
        '<ul class="foo">'
        '<li class="bar" style="background-color: red; border-left: 10px;">'
        '<li class="baz" style="background-color: black;>'
        '<li class="baz classy" style="background-color: blue; ">'
        '</ul>',
        treeSanitizer: new NullTreeSanitizer());
    document.documentElement.children.add(listElement);

    var elements = document.querySelectorAll('li');
    expect(elements.style.backgroundColor, equals('red'));
    expect(elements.style.borderLeftWidth, equals('10px'));
    elements = document.querySelectorAll('.baz');
    expect(elements.style.backgroundColor, equals('black'));
    expect(elements.style.borderLeftWidth, equals(''));
    elements = document.querySelectorAll('.bar');
    expect(elements.style.backgroundColor, equals('red'));
  });

  test('css multi set', () {
    var listElement = new Element.html(
        '<ul class="foo">'
        '<li class="bar" style="background-color: red; border-left: 10px;">'
        '<li class="baz" style="background-color: black;>'
        '<li class="baz" id="wat" style="background-color: blue; ">'
        '</ul>',
        treeSanitizer: new NullTreeSanitizer());
    document.documentElement.children.add(listElement);

    var elements = document.querySelectorAll('li');
    elements.style.backgroundColor = 'green';
    expect(elements.style.backgroundColor, equals('green'));
    expect(elements.style.borderLeftWidth, equals('10px'));

    elements = document.querySelectorAll('.baz');
    expect(elements.style.backgroundColor, equals('green'));
    elements.style.backgroundColor = 'yellow';
    expect(elements.style.backgroundColor, equals('yellow'));
    expect(elements.style.borderLeftWidth, equals(''));

    elements = document.querySelectorAll('.bar');
    expect(elements.style.backgroundColor, equals('green'));
    elements = document.querySelectorAll('#wat');
    expect(elements.style.backgroundColor, equals('yellow'));

    elements.style.borderLeftWidth = '18px';
    expect(elements.style.borderLeftWidth, equals('18px'));
    elements = document.querySelectorAll('li');
    expect(elements.style.borderLeftWidth, equals('10px'));
  });

  test('supports property', () {
    expect(document.body.style.supportsProperty('bogus-property'), false);
    expect(document.body.style.supportsProperty('background'), true);
    expect(document.body.style.supportsProperty('borderBottomWidth'), true);
    expect(document.body.style.supportsProperty('animation'), true);
  });
}