LayoutTests/transitions/resources/transition-test-helpers.js - WebKit - Git at Google

 /* This is the helper function to run transition tests:

 Test page requirements:
 - The body must contain an empty div with id "result"
 - Call this function directly from the <script> inside the test page

 Function parameters:
     expected [required]: an array of arrays defining a set of CSS properties that must have given values at specific times (see below)
     callback [optional]: a function to be executed just before the test starts (none by default)

     Each sub-array must contain these items in this order:
     - the time in seconds at which to snapshot the CSS property
     - the id of the element on which to get the CSS property value
     - the name of the CSS property to get [1]
     - the expected value for the CSS property
     - the tolerance to use when comparing the effective CSS property value with its expected value

     [1] If the CSS property name is "-webkit-transform", expected value must be an array of 1 or more numbers corresponding to the matrix elements,
     or a string which will be compared directly (useful if the expected value is "none")
     If the CSS property name is "-webkit-transform.N", expected value must be a number corresponding to the Nth element of the matrix

 */

 var usePauseAPI = true;
 var dontUsePauseAPI = false;

 var shouldBeTransitioning = true;
 var shouldNotBeTransitioning = false;

 function roundNumber(num, decimalPlaces)
 {
   return Math.round(num * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
 }

 function isCloseEnough(actual, desired, tolerance)
 {
     var diff = Math.abs(actual - desired);
     return diff <= tolerance;
 }

 function isShadow(property)
 {
   return (property == '-webkit-box-shadow' || property == 'text-shadow');
 }

 function getShadowXY(cssValue)
 {
     var text = cssValue.cssText;
     // Shadow cssText looks like "rgb(0, 0, 255) 0px -3px 10px 0px"
     var shadowPositionRegExp = /\)\s*(-?\d+)px\s*(-?\d+)px/;
     var result = shadowPositionRegExp.exec(text);
     return [parseInt(result[1]), parseInt(result[2])];
 }

 function compareRGB(rgb, expected, tolerance)
 {
     return (isCloseEnough(parseInt(rgb[0]), expected[0], tolerance) &&
             isCloseEnough(parseInt(rgb[1]), expected[1], tolerance) &&
             isCloseEnough(parseInt(rgb[2]), expected[2], tolerance));
 }

 function parseCrossFade(s)
 {
     var matches = s.match("(?:-webkit-)?cross-fade\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");

     if (!matches)
         return null;

     return {"from": matches[1], "to": matches[2], "percent": parseFloat(matches[3])}
 }

 function extractPathValues(path)
 {
     var components = path.split(' ');
     var result = [];
     for (component of components) {
         var compMatch;
         if (compMatch = component.match(/[0-9.-]+/)) {
             result.push(parseFloat(component))
         }
     }
     return result;
 }

 function parseClipPath(s)
 {
     var pathMatch;
     if (pathMatch = s.match(/path\(((evenodd|nonzero), ?)?\'(.+)\'\)/))
         return extractPathValues(pathMatch[pathMatch.length - 1]);

     if (pathMatch = s.match(/path\(((evenodd|nonzero), ?)?\"(.+)\"\)/))
         return extractPathValues(pathMatch[pathMatch.length - 1]);

     // FIXME: This only matches a subset of the shape syntax, and the polygon expects 4 points.
     var patterns = [
         /inset\(([\d.]+)\w+ ([\d.]+)\w+\)/,
         /circle\(([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
         /ellipse\(([\d.]+)\w+ ([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
         /polygon\(([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\)/,
     ];

     for (pattern of patterns) {
         var matchResult;
         if (matchResult = s.match(pattern)) {
             var result = [];
             for (var i = 1; i < matchResult.length; ++i)
                 result.push(parseFloat(matchResult[i]));
             return result;
         }
     }

     window.console.log('failed to match ' + s);
     return null;
 }

 function hasFloatValue(value)
 {
     switch (value.primitiveType) {
     case CSSPrimitiveValue.CSS_FR:
     case CSSPrimitiveValue.CSS_NUMBER:
     case CSSPrimitiveValue.CSS_PARSER_INTEGER:
     case CSSPrimitiveValue.CSS_PERCENTAGE:
     case CSSPrimitiveValue.CSS_EMS:
     case CSSPrimitiveValue.CSS_EXS:
     case CSSPrimitiveValue.CSS_CHS:
     case CSSPrimitiveValue.CSS_REMS:
     case CSSPrimitiveValue.CSS_PX:
     case CSSPrimitiveValue.CSS_CM:
     case CSSPrimitiveValue.CSS_MM:
     case CSSPrimitiveValue.CSS_IN:
     case CSSPrimitiveValue.CSS_PT:
     case CSSPrimitiveValue.CSS_PC:
     case CSSPrimitiveValue.CSS_DEG:
     case CSSPrimitiveValue.CSS_RAD:
     case CSSPrimitiveValue.CSS_GRAD:
     case CSSPrimitiveValue.CSS_TURN:
     case CSSPrimitiveValue.CSS_MS:
     case CSSPrimitiveValue.CSS_S:
     case CSSPrimitiveValue.CSS_HZ:
     case CSSPrimitiveValue.CSS_KHZ:
     case CSSPrimitiveValue.CSS_DIMENSION:
     case CSSPrimitiveValue.CSS_VW:
     case CSSPrimitiveValue.CSS_VH:
     case CSSPrimitiveValue.CSS_VMIN:
     case CSSPrimitiveValue.CSS_VMAX:
     case CSSPrimitiveValue.CSS_DPPX:
     case CSSPrimitiveValue.CSS_DPI:
     case CSSPrimitiveValue.CSS_DPCM:
         return true;
     }
     return false;
 }

 function getNumericValue(cssValue)
 {
     if (hasFloatValue(cssValue.primitiveType))
         return cssValue.getFloatValue(cssValue.primitiveType);

     return -1;
 }

 function isCalcPrimitiveValue(value)
 {
     switch (value.primitiveType) {
     case 113: // CSSPrimitiveValue.CSS_CALC:
     case 114: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_NUMBER:
     case 115: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_LENGTH:
     return true;
     }
     return false;
 }

 function extractNumbersFromCalcExpression(value, values)
 {
     var calcRegexp = /^calc\((.+)\)$/;
     var result = calcRegexp.exec(value.cssText);
     var numberMatch = /([^\.\-0-9]*)(-?[\.0-9]+)/;
     var remainder = result[1];
     var match;
     while ((match = numberMatch.exec(remainder)) !== null) {
         var skipLength = match[1].length + match[2].length;
         values.push(parseFloat(match[2]))
         remainder = remainder.substr(skipLength + 1);
     }
 }

 function checkExpectedValue(expected, index)
 {
     var time = expected[index][0];
     var elementId = expected[index][1];
     var property = expected[index][2];
     var expectedValue = expected[index][3];
     var tolerance = expected[index][4];
     var postCompletionCallback = expected[index][5];

     var computedValue;
     var pass = false;
     var transformRegExp = /^-webkit-transform(\.\d+)?$/;
     if (transformRegExp.test(property)) {
         computedValue = window.getComputedStyle(document.getElementById(elementId)).webkitTransform;
         if (typeof expectedValue == "string")
             pass = (computedValue == expectedValue);
         else if (typeof expectedValue == "number") {
             var m = computedValue.split("(");
             var m = m[1].split(",");
             pass = isCloseEnough(parseFloat(m[parseInt(property.substring(18))]), expectedValue, tolerance);
         } else {
             var m = computedValue.split("(");
             var m = m[1].split(",");
             for (i = 0; i < expectedValue.length; ++i) {
                 pass = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
                 if (!pass)
                     break;
             }
         }
     } else if (property == "fill" || property == "stroke") {
         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).rgbColor;
         if (compareRGB([computedValue.red.cssText, computedValue.green.cssText, computedValue.blue.cssText], expectedValue, tolerance))
             pass = true;
         else {
             // We failed. Make sure computed value is something we can read in the error message
             computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
         }
     } else if (property == "stop-color" || property == "flood-color" || property == "lighting-color") {
         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
         // The computedValue cssText is rgb(num, num, num)
         var components = computedValue.cssText.split("(")[1].split(")")[0].split(",");
         if (compareRGB(components, expectedValue, tolerance))
             pass = true;
         else {
             // We failed. Make sure computed value is something we can read in the error message
             computedValue = computedValue.cssText;
         }
     } else if (property == "lineHeight") {
         computedValue = parseInt(window.getComputedStyle(document.getElementById(elementId)).lineHeight);
         pass = isCloseEnough(computedValue, expectedValue, tolerance);
     } else if (property == "background-image"
                || property == "border-image-source"
                || property == "border-image"
                || property == "list-style-image"
                || property == "-webkit-mask-image"
                || property == "-webkit-mask-box-image") {
         if (property == "border-image" || property == "-webkit-mask-image" || property == "-webkit-mask-box-image")
             property += "-source";

         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
         computedCrossFade = parseCrossFade(computedValue);

         if (!computedCrossFade) {
             pass = false;
         } else {
             pass = isCloseEnough(computedCrossFade.percent, expectedValue, tolerance);
         }
     } else if (property == "-webkit-clip-path" || property == "-webkit-shape-outside") {
         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;

         var expectedValues = parseClipPath(expectedValue);
         var values = parseClipPath(computedValue);

         pass = false;
         if (values && values.length == expectedValues.length) {
             pass = true
             for (var i = 0; i < values.length; ++i)
                 pass &= isCloseEnough(values[i], expectedValues[i], tolerance);
         }
     } else {
         var computedStyle = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
         if (computedStyle.cssValueType == CSSValue.CSS_VALUE_LIST) {
             var values = [];
             for (var i = 0; i < computedStyle.length; ++i) {
                 var styleValue = computedStyle[i];
                 switch (styleValue.cssValueType) {
                   case CSSValue.CSS_PRIMITIVE_VALUE:
                     if (hasFloatValue(styleValue))
                         values.push(styleValue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER));
                     else if (isCalcPrimitiveValue(styleValue))
                         extractNumbersFromCalcExpression(styleValue, values);
                     break;
                   case CSSValue.CSS_CUSTOM:
                     // arbitrarily pick shadow-x and shadow-y
                     if (isShadow) {
                       var shadowXY = getShadowXY(styleValue);
                       values.push(shadowXY[0]);
                       values.push(shadowXY[1]);
                     } else
                       values.push(styleValue.cssText);
                     break;
                 }
             }
             computedValue = values.join(',');
             pass = values.length > 0;
             for (var i = 0; i < values.length; ++i)
                 pass &= isCloseEnough(values[i], expectedValue[i], tolerance);
         } else if (computedStyle.cssValueType == CSSValue.CSS_PRIMITIVE_VALUE) {
             switch (computedStyle.primitiveType) {
                 case CSSPrimitiveValue.CSS_STRING:
                 case CSSPrimitiveValue.CSS_IDENT:
                     computedValue = computedStyle.getStringValue();
                     pass = computedValue == expectedValue;
                     break;
                 case CSSPrimitiveValue.CSS_RGBCOLOR:
                     var rgbColor = computedStyle.getRGBColorValue();
                     computedValue = [rgbColor.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
                                      rgbColor.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
                                      rgbColor.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)]; // alpha is not exposed to JS
                     pass = true;
                     for (var i = 0; i < 3; ++i)
                         pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
                     break;
                 case CSSPrimitiveValue.CSS_RECT:
                     computedValue = computedStyle.getRectValue();
                     computedValue = [computedValue.top.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
                                      computedValue.right.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
                                      computedValue.bottom.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
                                      computedValue.left.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)];
                      pass = true;
                      for (var i = 0; i < 4; ++i)
                          pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
                     break;
                 case CSSPrimitiveValue.CSS_PERCENTAGE:
                     computedValue = parseFloat(computedStyle.cssText);
                     pass = isCloseEnough(computedValue, expectedValue, tolerance);
                     break;
                 default:
                     computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
                     pass = isCloseEnough(computedValue, expectedValue, tolerance);
             }
         }
     }

     if (pass)
         result += "PASS - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s saw something close to: " + expectedValue + "<br>";
     else
         result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";

     if (postCompletionCallback)
       result += postCompletionCallback();
 }

 function endTest()
 {
     document.getElementById('result').innerHTML = result;

     if (window.testRunner)
         testRunner.notifyDone();
 }

 function checkExpectedValueCallback(expected, index)
 {
     return function() { checkExpectedValue(expected, index); };
 }

 const prefix = "-webkit-";
 const propertiesRequiringPrefix = ["-webkit-text-stroke-color", "-webkit-text-fill-color"];

 function pauseTransitionAtTimeOnElement(transitionProperty, time, element)
 {
     // If we haven't opted into CSS Animations and CSS Transitions as Web Animations, use the internal API.
     if ('internals' in window && !internals.settings.cssAnimationsAndCSSTransitionsBackedByWebAnimationsEnabled())
         return internals.pauseTransitionAtTimeOnElement(transitionProperty, time, element);

     if (transitionProperty.startsWith(prefix) && !propertiesRequiringPrefix.includes(transitionProperty))
         transitionProperty = transitionProperty.substr(prefix.length);

     // Otherwise, use the Web Animations API.
     const animations = element.getAnimations();
     for (let animation of animations) {
         if (animation instanceof CSSTransition && animation.transitionProperty == transitionProperty) {
             animation.currentTime = time * 1000;
             animation.pause();
             return true;
         }
     }
     console.log(`A transition for property ${transitionProperty} could not be found`);
     return false;
 }

 function runTest(expected, usePauseAPI)
 {
     var maxTime = 0;
     for (var i = 0; i < expected.length; ++i) {
         var time = expected[i][0];
         var elementId = expected[i][1];
         var property = expected[i][2];
         if (!property.indexOf("-webkit-transform."))
             property = "-webkit-transform";

         var tryToPauseTransition = expected[i][6];
         if (tryToPauseTransition === undefined)
           tryToPauseTransition = shouldBeTransitioning;

         if (hasPauseTransitionAPI && usePauseAPI) {
             if (tryToPauseTransition) {
               var element = document.getElementById(elementId);
               if (!pauseTransitionAtTimeOnElement(property, time, element))
                 window.console.log("Failed to pause '" + property + "' transition on element '" + elementId + "'");
             }
             checkExpectedValue(expected, i);
         } else {
             if (time > maxTime)
                 maxTime = time;

             window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
         }
     }

     if (maxTime > 0)
         window.setTimeout(endTest, maxTime * 1000 + 50);
     else
         endTest();
 }

 function waitForAnimationStart(callback, delay)
 {
     var delayTimeout = delay ? 1000 * delay + 10 : 0;
     // Why the two setTimeouts? Well, for hardware animations we need to ensure that the hardware animation
     // has started before we try to pause it, and timers fire before animations get committed in the runloop.
     window.setTimeout(function() {
         window.setTimeout(function() {
             callback();
         }, 0);
     }, delayTimeout);
 }

 function startTest(expected, usePauseAPI, callback)
 {
     if (callback)
         callback();

     waitForAnimationStart(function() {
         runTest(expected, usePauseAPI);
     });
 }

 var result = "";
 var hasPauseTransitionAPI = true;

 function runTransitionTest(expected, callback, usePauseAPI, doPixelTest)
 {
     if (window.testRunner) {
         if (!doPixelTest)
             testRunner.dumpAsText();
         testRunner.waitUntilDone();
     }

     if (!expected)
         throw("Expected results are missing!");

     window.addEventListener("load", function() { startTest(expected, usePauseAPI, callback); }, false);
 }
	/* This is the helper function to run transition tests:

	Test page requirements:
	- The body must contain an empty div with id "result"
	- Call this function directly from the <script> inside the test page

	Function parameters:
	expected [required]: an array of arrays defining a set of CSS properties that must have given values at specific times (see below)
	callback [optional]: a function to be executed just before the test starts (none by default)

	Each sub-array must contain these items in this order:
	- the time in seconds at which to snapshot the CSS property
	- the id of the element on which to get the CSS property value
	- the name of the CSS property to get [1]
	- the expected value for the CSS property
	- the tolerance to use when comparing the effective CSS property value with its expected value

	[1] If the CSS property name is "-webkit-transform", expected value must be an array of 1 or more numbers corresponding to the matrix elements,
	or a string which will be compared directly (useful if the expected value is "none")
	If the CSS property name is "-webkit-transform.N", expected value must be a number corresponding to the Nth element of the matrix

	*/

	var usePauseAPI = true;
	var dontUsePauseAPI = false;

	var shouldBeTransitioning = true;
	var shouldNotBeTransitioning = false;

	function roundNumber(num, decimalPlaces)
	{
	return Math.round(num * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
	}

	function isCloseEnough(actual, desired, tolerance)
	{
	var diff = Math.abs(actual - desired);
	return diff <= tolerance;
	}

	function isShadow(property)
	{
	return (property == '-webkit-box-shadow' \|\| property == 'text-shadow');
	}

	function getShadowXY(cssValue)
	{
	var text = cssValue.cssText;
	// Shadow cssText looks like "rgb(0, 0, 255) 0px -3px 10px 0px"
	var shadowPositionRegExp = /\)\s(-?\d+)px\s(-?\d+)px/;
	var result = shadowPositionRegExp.exec(text);
	return [parseInt(result[1]), parseInt(result[2])];
	}

	function compareRGB(rgb, expected, tolerance)
	{
	return (isCloseEnough(parseInt(rgb[0]), expected[0], tolerance) &&
	isCloseEnough(parseInt(rgb[1]), expected[1], tolerance) &&
	isCloseEnough(parseInt(rgb[2]), expected[2], tolerance));
	}

	function parseCrossFade(s)
	{
	var matches = s.match("(?:-webkit-)?cross-fade\\((.)\\s,\\s(.)\\s,\\s(.*)\\)");

	if (!matches)
	return null;

	return {"from": matches[1], "to": matches[2], "percent": parseFloat(matches[3])}
	}

	function extractPathValues(path)
	{
	var components = path.split(' ');
	var result = [];
	for (component of components) {
	var compMatch;
	if (compMatch = component.match(/[0-9.-]+/)) {
	result.push(parseFloat(component))
	}
	}
	return result;
	}

	function parseClipPath(s)
	{
	var pathMatch;
	if (pathMatch = s.match(/path\(((evenodd\|nonzero), ?)?\'(.+)\'\)/))
	return extractPathValues(pathMatch[pathMatch.length - 1]);

	if (pathMatch = s.match(/path\(((evenodd\|nonzero), ?)?\"(.+)\"\)/))
	return extractPathValues(pathMatch[pathMatch.length - 1]);

	// FIXME: This only matches a subset of the shape syntax, and the polygon expects 4 points.
	var patterns = [
	/inset\(([\d.]+)\w+ ([\d.]+)\w+\)/,
	/circle\(([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
	/ellipse\(([\d.]+)\w+ ([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
	/polygon\(([\d.]+)\w* ([\d.]+)\w\, ([\d.]+)\w ([\d.]+)\w\, ([\d.]+)\w ([\d.]+)\w\, ([\d.]+)\w ([\d.]+)\w*\)/,
	];

	for (pattern of patterns) {
	var matchResult;
	if (matchResult = s.match(pattern)) {
	var result = [];
	for (var i = 1; i < matchResult.length; ++i)
	result.push(parseFloat(matchResult[i]));
	return result;
	}
	}

	window.console.log('failed to match ' + s);
	return null;
	}

	function hasFloatValue(value)
	{
	switch (value.primitiveType) {
	case CSSPrimitiveValue.CSS_FR:
	case CSSPrimitiveValue.CSS_NUMBER:
	case CSSPrimitiveValue.CSS_PARSER_INTEGER:
	case CSSPrimitiveValue.CSS_PERCENTAGE:
	case CSSPrimitiveValue.CSS_EMS:
	case CSSPrimitiveValue.CSS_EXS:
	case CSSPrimitiveValue.CSS_CHS:
	case CSSPrimitiveValue.CSS_REMS:
	case CSSPrimitiveValue.CSS_PX:
	case CSSPrimitiveValue.CSS_CM:
	case CSSPrimitiveValue.CSS_MM:
	case CSSPrimitiveValue.CSS_IN:
	case CSSPrimitiveValue.CSS_PT:
	case CSSPrimitiveValue.CSS_PC:
	case CSSPrimitiveValue.CSS_DEG:
	case CSSPrimitiveValue.CSS_RAD:
	case CSSPrimitiveValue.CSS_GRAD:
	case CSSPrimitiveValue.CSS_TURN:
	case CSSPrimitiveValue.CSS_MS:
	case CSSPrimitiveValue.CSS_S:
	case CSSPrimitiveValue.CSS_HZ:
	case CSSPrimitiveValue.CSS_KHZ:
	case CSSPrimitiveValue.CSS_DIMENSION:
	case CSSPrimitiveValue.CSS_VW:
	case CSSPrimitiveValue.CSS_VH:
	case CSSPrimitiveValue.CSS_VMIN:
	case CSSPrimitiveValue.CSS_VMAX:
	case CSSPrimitiveValue.CSS_DPPX:
	case CSSPrimitiveValue.CSS_DPI:
	case CSSPrimitiveValue.CSS_DPCM:
	return true;
	}
	return false;
	}

	function getNumericValue(cssValue)
	{
	if (hasFloatValue(cssValue.primitiveType))
	return cssValue.getFloatValue(cssValue.primitiveType);

	return -1;
	}

	function isCalcPrimitiveValue(value)
	{
	switch (value.primitiveType) {
	case 113: // CSSPrimitiveValue.CSS_CALC:
	case 114: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_NUMBER:
	case 115: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_LENGTH:
	return true;
	}
	return false;
	}

	function extractNumbersFromCalcExpression(value, values)
	{
	var calcRegexp = /^calc\((.+)\)$/;
	var result = calcRegexp.exec(value.cssText);
	var numberMatch = /([^\.\-0-9]*)(-?[\.0-9]+)/;
	var remainder = result[1];
	var match;
	while ((match = numberMatch.exec(remainder)) !== null) {
	var skipLength = match[1].length + match[2].length;
	values.push(parseFloat(match[2]))
	remainder = remainder.substr(skipLength + 1);
	}
	}

	function checkExpectedValue(expected, index)
	{
	var time = expected[index][0];
	var elementId = expected[index][1];
	var property = expected[index][2];
	var expectedValue = expected[index][3];
	var tolerance = expected[index][4];
	var postCompletionCallback = expected[index][5];

	var computedValue;
	var pass = false;
	var transformRegExp = /^-webkit-transform(\.\d+)?$/;
	if (transformRegExp.test(property)) {
	computedValue = window.getComputedStyle(document.getElementById(elementId)).webkitTransform;
	if (typeof expectedValue == "string")
	pass = (computedValue == expectedValue);
	else if (typeof expectedValue == "number") {
	var m = computedValue.split("(");
	var m = m[1].split(",");
	pass = isCloseEnough(parseFloat(m[parseInt(property.substring(18))]), expectedValue, tolerance);
	} else {
	var m = computedValue.split("(");
	var m = m[1].split(",");
	for (i = 0; i < expectedValue.length; ++i) {
	pass = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
	if (!pass)
	break;
	}
	}
	} else if (property == "fill" \|\| property == "stroke") {
	computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).rgbColor;
	if (compareRGB([computedValue.red.cssText, computedValue.green.cssText, computedValue.blue.cssText], expectedValue, tolerance))
	pass = true;
	else {
	// We failed. Make sure computed value is something we can read in the error message
	computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
	}
	} else if (property == "stop-color" \|\| property == "flood-color" \|\| property == "lighting-color") {
	computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
	// The computedValue cssText is rgb(num, num, num)
	var components = computedValue.cssText.split("(")[1].split(")")[0].split(",");
	if (compareRGB(components, expectedValue, tolerance))
	pass = true;
	else {
	// We failed. Make sure computed value is something we can read in the error message
	computedValue = computedValue.cssText;
	}
	} else if (property == "lineHeight") {
	computedValue = parseInt(window.getComputedStyle(document.getElementById(elementId)).lineHeight);
	pass = isCloseEnough(computedValue, expectedValue, tolerance);
	} else if (property == "background-image"
	\|\| property == "border-image-source"
	\|\| property == "border-image"
	\|\| property == "list-style-image"
	\|\| property == "-webkit-mask-image"
	\|\| property == "-webkit-mask-box-image") {
	if (property == "border-image" \|\| property == "-webkit-mask-image" \|\| property == "-webkit-mask-box-image")
	property += "-source";

	computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
	computedCrossFade = parseCrossFade(computedValue);

	if (!computedCrossFade) {
	pass = false;
	} else {
	pass = isCloseEnough(computedCrossFade.percent, expectedValue, tolerance);
	}
	} else if (property == "-webkit-clip-path" \|\| property == "-webkit-shape-outside") {
	computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;

	var expectedValues = parseClipPath(expectedValue);
	var values = parseClipPath(computedValue);

	pass = false;
	if (values && values.length == expectedValues.length) {
	pass = true
	for (var i = 0; i < values.length; ++i)
	pass &= isCloseEnough(values[i], expectedValues[i], tolerance);
	}
	} else {
	var computedStyle = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
	if (computedStyle.cssValueType == CSSValue.CSS_VALUE_LIST) {
	var values = [];
	for (var i = 0; i < computedStyle.length; ++i) {
	var styleValue = computedStyle[i];
	switch (styleValue.cssValueType) {
	case CSSValue.CSS_PRIMITIVE_VALUE:
	if (hasFloatValue(styleValue))
	values.push(styleValue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER));
	else if (isCalcPrimitiveValue(styleValue))
	extractNumbersFromCalcExpression(styleValue, values);
	break;
	case CSSValue.CSS_CUSTOM:
	// arbitrarily pick shadow-x and shadow-y
	if (isShadow) {
	var shadowXY = getShadowXY(styleValue);
	values.push(shadowXY[0]);
	values.push(shadowXY[1]);
	} else
	values.push(styleValue.cssText);
	break;
	}
	}
	computedValue = values.join(',');
	pass = values.length > 0;
	for (var i = 0; i < values.length; ++i)
	pass &= isCloseEnough(values[i], expectedValue[i], tolerance);
	} else if (computedStyle.cssValueType == CSSValue.CSS_PRIMITIVE_VALUE) {
	switch (computedStyle.primitiveType) {
	case CSSPrimitiveValue.CSS_STRING:
	case CSSPrimitiveValue.CSS_IDENT:
	computedValue = computedStyle.getStringValue();
	pass = computedValue == expectedValue;
	break;
	case CSSPrimitiveValue.CSS_RGBCOLOR:
	var rgbColor = computedStyle.getRGBColorValue();
	computedValue = [rgbColor.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
	rgbColor.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
	rgbColor.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)]; // alpha is not exposed to JS
	pass = true;
	for (var i = 0; i < 3; ++i)
	pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
	break;
	case CSSPrimitiveValue.CSS_RECT:
	computedValue = computedStyle.getRectValue();
	computedValue = [computedValue.top.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
	computedValue.right.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
	computedValue.bottom.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
	computedValue.left.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)];
	pass = true;
	for (var i = 0; i < 4; ++i)
	pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
	break;
	case CSSPrimitiveValue.CSS_PERCENTAGE:
	computedValue = parseFloat(computedStyle.cssText);
	pass = isCloseEnough(computedValue, expectedValue, tolerance);
	break;
	default:
	computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
	pass = isCloseEnough(computedValue, expectedValue, tolerance);
	}
	}
	}

	if (pass)
	result += "PASS - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s saw something close to: " + expectedValue + "<br>";
	else
	result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";

	if (postCompletionCallback)
	result += postCompletionCallback();
	}

	function endTest()
	{
	document.getElementById('result').innerHTML = result;

	if (window.testRunner)
	testRunner.notifyDone();
	}

	function checkExpectedValueCallback(expected, index)
	{
	return function() { checkExpectedValue(expected, index); };
	}

	const prefix = "-webkit-";
	const propertiesRequiringPrefix = ["-webkit-text-stroke-color", "-webkit-text-fill-color"];

	function pauseTransitionAtTimeOnElement(transitionProperty, time, element)
	{
	// If we haven't opted into CSS Animations and CSS Transitions as Web Animations, use the internal API.
	if ('internals' in window && !internals.settings.cssAnimationsAndCSSTransitionsBackedByWebAnimationsEnabled())
	return internals.pauseTransitionAtTimeOnElement(transitionProperty, time, element);

	if (transitionProperty.startsWith(prefix) && !propertiesRequiringPrefix.includes(transitionProperty))
	transitionProperty = transitionProperty.substr(prefix.length);

	// Otherwise, use the Web Animations API.
	const animations = element.getAnimations();
	for (let animation of animations) {
	if (animation instanceof CSSTransition && animation.transitionProperty == transitionProperty) {
	animation.currentTime = time * 1000;
	animation.pause();
	return true;
	}
	}
	console.log(`A transition for property ${transitionProperty} could not be found`);
	return false;
	}

	function runTest(expected, usePauseAPI)
	{
	var maxTime = 0;
	for (var i = 0; i < expected.length; ++i) {
	var time = expected[i][0];
	var elementId = expected[i][1];
	var property = expected[i][2];
	if (!property.indexOf("-webkit-transform."))
	property = "-webkit-transform";

	var tryToPauseTransition = expected[i][6];
	if (tryToPauseTransition === undefined)
	tryToPauseTransition = shouldBeTransitioning;

	if (hasPauseTransitionAPI && usePauseAPI) {
	if (tryToPauseTransition) {
	var element = document.getElementById(elementId);
	if (!pauseTransitionAtTimeOnElement(property, time, element))
	window.console.log("Failed to pause '" + property + "' transition on element '" + elementId + "'");
	}
	checkExpectedValue(expected, i);
	} else {
	if (time > maxTime)
	maxTime = time;

	window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
	}
	}

	if (maxTime > 0)
	window.setTimeout(endTest, maxTime * 1000 + 50);
	else
	endTest();
	}

	function waitForAnimationStart(callback, delay)
	{
	var delayTimeout = delay ? 1000 * delay + 10 : 0;
	// Why the two setTimeouts? Well, for hardware animations we need to ensure that the hardware animation
	// has started before we try to pause it, and timers fire before animations get committed in the runloop.
	window.setTimeout(function() {
	window.setTimeout(function() {
	callback();
	}, 0);
	}, delayTimeout);
	}

	function startTest(expected, usePauseAPI, callback)
	{
	if (callback)
	callback();

	waitForAnimationStart(function() {
	runTest(expected, usePauseAPI);
	});
	}

	var result = "";
	var hasPauseTransitionAPI = true;

	function runTransitionTest(expected, callback, usePauseAPI, doPixelTest)
	{
	if (window.testRunner) {
	if (!doPixelTest)
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	if (!expected)
	throw("Expected results are missing!");

	window.addEventListener("load", function() { startTest(expected, usePauseAPI, callback); }, false);
	}