<!DOCTYPE html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<div>
<div style="width:500px;height:500px"><div id="test">hello</div></div>
</div>
<script>
'use strict';
// Test the parsing and the computed style values of the transitions properties.
var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);
test(() => {
// Test initial value.
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "none";
assert_not_equals(Object.keys(style).indexOf('transitionProperty'), -1);
assert_not_equals(Object.keys(style).indexOf('webkitTransitionProperty'), -1);
assert_equals(style.transitionProperty, 'none');
assert_equals(computedStyle.transitionProperty, 'none');
assert_equals(style.webkitTransitionProperty, 'none');
assert_equals(computedStyle.webkitTransitionProperty, 'none');
style.transitionProperty = "all";
assert_equals(style.transitionProperty, 'all');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, 'all');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "all, all";
assert_equals(style.transitionProperty, 'all, all');
assert_equals(computedStyle.transitionProperty, 'all, all');
assert_equals(style.webkitTransitionProperty, 'all, all');
assert_equals(computedStyle.webkitTransitionProperty, 'all, all');
style.transitionProperty = "-webkit-transform-origin";
assert_equals(style.transitionProperty, '-webkit-transform-origin');
assert_equals(computedStyle.transitionProperty, '-webkit-transform-origin');
style.transitionProperty = "background-position";
assert_equals(style.transitionProperty, 'background-position');
assert_equals(computedStyle.transitionProperty, 'background-position');
assert_equals(style.webkitTransitionProperty, 'background-position');
assert_equals(computedStyle.webkitTransitionProperty, 'background-position');
style.transitionProperty = "background-position, font-size";
assert_equals(style.transitionProperty, 'background-position, font-size');
assert_equals(computedStyle.transitionProperty, 'background-position, font-size');
assert_equals(style.webkitTransitionProperty, 'background-position, font-size');
assert_equals(computedStyle.webkitTransitionProperty, 'background-position, font-size');
style.transitionProperty = "background-position, font-size, color";
assert_equals(style.transitionProperty, 'background-position, font-size, color');
assert_equals(computedStyle.transitionProperty, 'background-position, font-size, color');
assert_equals(style.webkitTransitionProperty, 'background-position, font-size, color');
assert_equals(computedStyle.webkitTransitionProperty, 'background-position, font-size, color');
style.transitionProperty = "all, font-size, color";
assert_equals(style.transitionProperty, 'all, font-size, color');
assert_equals(computedStyle.transitionProperty, 'all, font-size, color');
assert_equals(style.webkitTransitionProperty, 'all, font-size, color');
assert_equals(computedStyle.webkitTransitionProperty, 'all, font-size, color');
style.transitionProperty = "font-size, color, all";
assert_equals(style.transitionProperty, 'font-size, color, all');
assert_equals(computedStyle.transitionProperty, 'font-size, color, all');
assert_equals(style.webkitTransitionProperty, 'font-size, color, all');
assert_equals(computedStyle.webkitTransitionProperty, 'font-size, color, all');
style.transitionProperty = "font-size, all, color";
assert_equals(style.transitionProperty, 'font-size, all, color');
assert_equals(computedStyle.transitionProperty, 'font-size, all, color');
assert_equals(style.webkitTransitionProperty, 'font-size, all, color');
assert_equals(computedStyle.webkitTransitionProperty, 'font-size, all, color');
}, "Valid transition-property values.");
test(() => {
style.transitionProperty = "solid, font-size";
assert_equals(style.transitionProperty, 'solid, font-size');
assert_equals(computedStyle.transitionProperty, 'solid, font-size');
assert_equals(style.webkitTransitionProperty, 'solid, font-size');
assert_equals(computedStyle.webkitTransitionProperty, 'solid, font-size');
style.transitionProperty = "solid, left";
assert_equals(style.transitionProperty, 'solid, left');
assert_equals(computedStyle.transitionProperty, 'solid, left');
assert_equals(style.webkitTransitionProperty, 'solid, left');
assert_equals(computedStyle.webkitTransitionProperty, 'solid, left');
style.transitionProperty = "solid";
assert_equals(style.transitionProperty, 'solid');
assert_equals(computedStyle.transitionProperty, 'solid');
assert_equals(style.webkitTransitionProperty, 'solid');
assert_equals(computedStyle.webkitTransitionProperty, 'solid');
}, "Unknown transition-property values.");
test(() => {
style.transitionProperty = "";
style.transitionProperty = "20px";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "0";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "'font-size'";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "all none";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "opacity width";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "all, none";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "none, none";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "none, all";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "width, none";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "none, width";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "default, top";
assert_equals(style.transitionProperty, '');
assert_equals(computedStyle.transitionProperty, 'all');
assert_equals(style.webkitTransitionProperty, '');
assert_equals(computedStyle.webkitTransitionProperty, 'all');
style.transitionProperty = "initial, width";
assert_equals(style.transitionProperty, '');
style.transitionProperty = "width, inherit";
assert_equals(style.transitionProperty, '');
style.transitionProperty = "left, unset";
assert_equals(style.transitionProperty, '');
style.transitionProperty = "";
}, "Invalid transition-property values.");
</script>
</body>
</html>
Codebase Browser
chromium