chromium/src/third_party/blink/web_tests/svg/in-html/sizing/svg-inline.js - manifest_repos/chromium_src - Git at Google

 // global async_test, assert_equals
 //
 // This test generates a couple of scenarios (each a TestData) for
 // sizing inline <svg> and has a simple JavaScript sizing
 // implementation that handles the generated scenarios. It generates a
 // DOM corresponding to the scenario and compares the laid out size to
 // the calculated size.
 //
 // The tests loops through different combinations of:
 //
 // * width and height on <svg>, both through style and attributes
 //
 // * viewBox on <svg> (gives intrinsic ratio)
 //
 // * width and height on containing block of <object>
 //
 // All these contribute to the final size of the SVG in some way.
 //
 // The test focuses on the size of the CSS box generated by the SVG.
 // The SVG is always empty by itself so no actual SVG are tested.
 //
 // Focus is also put on how the different attributes interact, little
 // focus is put on variations within an attribute that doesn't affect
 // the relationship to other attributes, i.e only px and % units are
 // used since that covers the interactions.
 //
 // To debug a specific test append ?<test-id> to the URL. An <iframe>
 // is generated with equivalent test and the source of the test is
 // added to a <pre> element.

 (function() {
     function parseLength(l) {
         var match = /^([-+]?[0-9]+|[-+]?[0-9]*\.[0-9]+)(px|%)?$/.exec(l);
         if (!match)
             return null;
         return new Length(Number(match[1]), match[2] ? match[2] : "px");
     }

     function parseViewBox(input) {
         if (!input)
             return null;

         var arr = input.split(' ');
         return arr.map(function(a) { return parseInt(a); });
     }

     // Only px and % are used
     function convertToPx(input, percentRef) {
         if (input == null)
             return null;
         var length = parseLength(input);
         if (length.amount == 0)
             return 0;
         if (!length.unit)
             length.unit = "px";
         if (length.unit == "%" && percentRef === undefined)
             return null;
         return length.amount * { px: 1,
                                  "%": percentRef/100}[length.unit];
     }

     function Length(amount, unit) {
         this.amount = amount;
         this.unit = unit;
     }

     function describe(data) {
         function dumpObject(obj) {
             var r = "";
             for (var property in obj) {
                 if (obj.hasOwnProperty(property)) {
                     var value = obj[property];
                     if (typeof value == 'string')
                         value = "'" + value + "'";
                     else if (value == null)
                         value = "null";
                     else if (typeof value == 'object')
                     {
                         if (value instanceof Array)
                             value = "[" + value + "]";
                         else
                             value = "{" + dumpObject(value) + "}";
                     }

                     if (value != "null")
                         r += property + ": " + value + ", ";
                 }
             }
             return r;
         }
         var result = dumpObject(data);
         if (result == "")
             return "(initial values)";
         return result;
     }

     function TestData(config) {
         this.config = config;
         this.name = describe(config);
         this.style = {};
         if (config.svgWidthStyle)
             this.style["width"] = config.svgWidthStyle;
         else
             this.mapPresentationalHintLength("width", config.svgWidthAttr);

         if (config.svgHeightStyle)
             this.style["height"] = config.svgHeightStyle;
         else
             this.mapPresentationalHintLength("height", config.svgHeightAttr);
     }

     TestData.prototype.mapPresentationalHintLength =
         function(cssProperty, attr) {
             if (attr) {
                 var l = parseLength(attr);
                 if (l)
                     this.style[cssProperty] = l.amount + l.unit;
             }
         };

     TestData.prototype.computedWidthIsAuto = function() {
         return !this.style["width"] || this.style["width"] == 'auto';
     };

     TestData.prototype.computedHeightIsAuto = function() {
         return !this.style["height"] || this.style["height"] == 'auto' ||
             (parseLength(this.style["height"]).unit == '%' &&
              this.containerComputedHeightIsAuto());
     };

     TestData.prototype.containerComputedWidthIsAuto = function() {
         return !this.config.containerWidthStyle ||
             this.config.containerWidthStyle == 'auto';
     };

     TestData.prototype.containerComputedHeightIsAuto = function() {
         return !this.config.containerHeightStyle ||
             this.config.containerHeightStyle == 'auto';
     };

     TestData.prototype.intrinsicInformation = function() {
         var w = convertToPx(this.config.svgWidthAttr) || 0;
         var h = convertToPx(this.config.svgHeightAttr) || 0;
         var r = 0;
         if (w && h) {
             r =  w / h;
         } else {
             var vb = parseViewBox(this.config.svgViewBoxAttr);
             if (vb) {
                 r = vb[2] / vb[3];
             }
             if (r) {
                 if (!w && h)
                     w = h * r;
                 else if (!h && w)
                     h = w / r;
             }
         }
         return { width: w, height: h, ratio: r };
     };


     TestData.prototype.computeInlineReplacedSize = function() {
         var intrinsic = this.intrinsicInformation();
         var self = this;

         // http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height
         function calculateUsedHeight() {
             if (self.computedHeightIsAuto()) {
                 if (self.computedWidthIsAuto() && intrinsic.height)
                     return intrinsic.height;
                 if (intrinsic.ratio)
                     return calculateUsedWidth() / intrinsic.ratio;
                 if (intrinsic.height)
                     return intrinsic.height;
                 return 150;
             }

             return convertToPx(self.style["height"],
                                convertToPx(self.config.containerHeightStyle,
                                            self.outerHeight));
         }

         // http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
         function calculateUsedWidth() {
             if (self.computedWidthIsAuto()) {
                 if (self.computedHeightIsAuto() && intrinsic.width)
                     return intrinsic.width;
                 if (!self.computedHeightIsAuto() && intrinsic.ratio)
                     return calculateUsedHeight() * intrinsic.ratio;
                 if (self.computedHeightIsAuto() && intrinsic.ratio) {
                     if (self.containerComputedWidthIsAuto()) {
                         // Note: While this is actually undefined in CSS
                         // 2.1, use the suggested value by examining the
                         // ancestor widths.
                         return self.outerWidth;
                     } else {
                         return convertToPx(self.config.containerWidthStyle,
                                            self.outerWidth);
                     }
                 }
                 if (intrinsic.width)
                     return intrinsic.width;
                 return 300;
             }

             if (self.containerComputedWidthIsAuto())
                 return convertToPx(self.style["width"], self.outerWidth);
             else
                 return convertToPx(self.style["width"],
                                    convertToPx(self.config.containerWidthStyle,
                                                self.outerWidth));
         }
         return { width: calculateUsedWidth(),
                  height: calculateUsedHeight() };
     };

     var testContainer = document.querySelector('#testContainer');
     TestData.prototype.outerWidth = testContainer.getBoundingClientRect().width;
     TestData.prototype.outerHeight = testContainer.getBoundingClientRect().height;

     window.TestData = TestData;
 })();

 function setupContainer(testData, svgElement, options) {
     options = options || {};

     var container = document.createElement("div");

     container.id = "container";
     if (testData.config.containerWidthStyle)
         container.style.width = testData.config.containerWidthStyle;

     if (testData.config.containerHeightStyle)
         container.style.height = testData.config.containerHeightStyle;

     if (options.pretty)
         container.appendChild(document.createTextNode("\n\t\t"));
     container.appendChild(svgElement);
     if (options.pretty)
         container.appendChild(document.createTextNode("\n\t"));

     return container;
 }

 function setupSVGElement(testData) {
     var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svgElement.setAttribute("id", "test");
     if (testData.config.svgWidthStyle)
         svgElement.style.width = testData.config.svgWidthStyle;
     if (testData.config.svgHeightStyle)
         svgElement.style.height = testData.config.svgHeightStyle;
     if (testData.config.svgWidthAttr)
         svgElement.setAttribute("width", testData.config.svgWidthAttr);
     if (testData.config.svgHeightAttr)
         svgElement.setAttribute("height", testData.config.svgHeightAttr);
     if (testData.config.svgViewBoxAttr)
         svgElement.setAttribute("viewBox", testData.config.svgViewBoxAttr);

     return svgElement;
 }

 function buildDemo(testData) {
     // Non-essential debugging tool

     var options = { pretty: true };
     var expectedRect =
             testData.computeInlineReplacedSize();
     var container =
             setupContainer(testData, setupSVGElement(testData), options);

     var root = document.createElement("html");
     var style = document.createElement("style");

     style.textContent = "\n" +
         "\tbody { margin: 0; font-family: sans-serif }\n" +
         "\t#expected {\n" +
         "\t\twidth: " + (expectedRect.width) + "px; height: "
         + (expectedRect.height) + "px;\n" +
         "\t\tborder: 10px solid lime; position: absolute;\n" +
         "\t\tbackground-color: red }\n" +
         "\t#testContainer { position: absolute;\n" +
         "\t\ttop: 10px; left: 10px; width: 800px; height: 600px }\n" +
         "\tsvg { background-color: green }\n" +
         "\t.result { position: absolute; top: 0; right: 0;\n" +
         "\t\tbackground-color: hsla(0,0%, 0%, 0.85); border-radius: 0.5em;\n" +
         "\t\tpadding: 0.5em; border: 0.25em solid black }\n" +
         "\t.pass { color: lime }\n" +
         "\t.fail { color: red }\n";

     root.appendChild(document.createTextNode("\n"));
     root.appendChild(style);
     root.appendChild(document.createTextNode("\n"));

     var script = document.createElement("script");
     script.textContent = "\n" +
         "onload = function() {\n" +
         "\tvar svgRect = \n" +
         "\t\tdocument.querySelector('#test').getBoundingClientRect();\n" +
         "\tpassed = (svgRect.width == " + expectedRect.width + " && " +
         "svgRect.height == " + expectedRect.height + ");\n" +
         "\tdocument.body.insertAdjacentHTML('beforeEnd',\n" +
         "\t\t'<span class=\"result '+ (passed ? 'pass' : 'fail') " +
         "+ '\">' + (passed ? 'Pass' : 'Fail') + '</span>');\n" +
         "};\n";

     root.appendChild(script);
     root.appendChild(document.createTextNode("\n"));

     var expectedElement = document.createElement("div");
     expectedElement.id = "expected";
     root.appendChild(expectedElement);
     root.appendChild(document.createTextNode("\n"));

     var testContainer = document.createElement("div");
     testContainer.id = "testContainer";
     testContainer.appendChild(document.createTextNode("\n\t"));
     testContainer.appendChild(container);
     testContainer.appendChild(document.createTextNode("\n"));
     root.appendChild(testContainer);
     root.appendChild(document.createTextNode("\n"));

     return "<!DOCTYPE html>\n" + root.outerHTML;
 }

 function doCombinationTest(values, func)
 {
     // Recursively construct all possible combinations of values and
     // send them to |func|. Example:
     //
     // values: [["X", ["a", "b"]],
     //          ["Y", ["c", "d"]]]
     //
     // generates the objects:
     //
     // 1: { "X": "a", "Y": "c" }
     // 2: { "X": "a", "Y": "d" }
     // 3: { "X": "b", "Y": "c" }
     // 4: { "X": "b", "Y": "d" }
     //
     // and each will be sent to |func| with the corresponding prefixed
     // id (modulo order).

     var combinationId = 1;
     function doCombinationTestRecursive(slicedValues, config) {
         if (slicedValues.length > 0) {
             var configKey = slicedValues[0][0];
             slicedValues[0][1].forEach(function(configValue) {
                 var new_config = {};
                 for (k in config)
                     new_config[k] = config[k];
                 new_config[configKey] = configValue;
                 doCombinationTestRecursive(slicedValues.slice(1), new_config);
             });
         } else {
             func(config, combinationId++);
         }
     }
     doCombinationTestRecursive(values, {});
 }

 var debugHint = function(id) { return "(append ?"+id+" to debug) " };
 var testSingleId;
 if (window.location.search) {
     testSingleId = window.location.search.substring(1);
     debugHint = function(id) { return ""; };
 }

 doCombinationTest(
     [["containerWidthStyle", [null, "400px"]],
      ["containerHeightStyle", [null, "400px"]],
      ["svgViewBoxAttr", [ null, "0 0 100 200" ]],
      ["svgWidthStyle", [ null, "100px", "50%" ]],
      ["svgHeightStyle", [ null, "100px", "50%" ]],
      ["svgWidthAttr", [ null, "200", "25%" ]],
      ["svgHeightAttr", [ null, "200", "25%" ]]],
     function(config, id) {
         if (!testSingleId || testSingleId == id) {
             var testData = new TestData(config);

             var expectedRect =
                     testData.computeInlineReplacedSize();
             var svgElement = setupSVGElement(testData);
             var container =
                     setupContainer(testData, svgElement);

             var checkSize = function() {
                 var svgRect =
                         svgElement.getBoundingClientRect();

                 try {
                     assert_equals(svgRect.width,
                                   expectedRect.width,
                                   debugHint(id) + "Wrong width");
                     assert_equals(svgRect.height,
                                   expectedRect.height,
                                   debugHint(id) + "Wrong height");
                 } finally {
                     testContainer.removeChild(container);
                     if (testSingleId)
                         document.body.removeChild(testContainer);
                 }
             };

             testContainer.appendChild(container);
             test(checkSize, testData.name);
         }

         if (testSingleId == id) {
             var pad = function(n, width, z) {
                 z = z || '0';
                 n = n + '';
                 return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
             };

             var demo = buildDemo(testData);
             var iframe = document.createElement('iframe');
             iframe.style.width = (Math.max(900, expectedRect.width)) + "px";
             iframe.style.height = (Math.max(400, expectedRect.height)) + "px";
             iframe.src = "data:text/html;charset=utf-8," + encodeURIComponent(demo);
             document.body.appendChild(iframe);

             document.body.insertAdjacentHTML(
                 'beforeEnd',
                 '<p><a href="data:application/octet-stream;charset=utf-8;base64,' +
                     btoa(demo) + '" download="svg-in-object-test-' + pad(id, 3) + '.html">Download</a></p>');
         }
     });
	// global async_test, assert_equals
	//
	// This test generates a couple of scenarios (each a TestData) for
	// sizing inline <svg> and has a simple JavaScript sizing
	// implementation that handles the generated scenarios. It generates a
	// DOM corresponding to the scenario and compares the laid out size to
	// the calculated size.
	//
	// The tests loops through different combinations of:
	//
	// * width and height on <svg>, both through style and attributes
	//
	// * viewBox on <svg> (gives intrinsic ratio)
	//
	// * width and height on containing block of <object>
	//
	// All these contribute to the final size of the SVG in some way.
	//
	// The test focuses on the size of the CSS box generated by the SVG.
	// The SVG is always empty by itself so no actual SVG are tested.
	//
	// Focus is also put on how the different attributes interact, little
	// focus is put on variations within an attribute that doesn't affect
	// the relationship to other attributes, i.e only px and % units are
	// used since that covers the interactions.
	//
	// To debug a specific test append ?<test-id> to the URL. An <iframe>
	// is generated with equivalent test and the source of the test is
	// added to a <pre> element.

	(function() {
	function parseLength(l) {
	var match = /^([-+]?[0-9]+\|[-+]?[0-9]*\.[0-9]+)(px\|%)?$/.exec(l);
	if (!match)
	return null;
	return new Length(Number(match[1]), match[2] ? match[2] : "px");
	}

	function parseViewBox(input) {
	if (!input)
	return null;

	var arr = input.split(' ');
	return arr.map(function(a) { return parseInt(a); });
	}

	// Only px and % are used
	function convertToPx(input, percentRef) {
	if (input == null)
	return null;
	var length = parseLength(input);
	if (length.amount == 0)
	return 0;
	if (!length.unit)
	length.unit = "px";
	if (length.unit == "%" && percentRef === undefined)
	return null;
	return length.amount * { px: 1,
	"%": percentRef/100}[length.unit];
	}

	function Length(amount, unit) {
	this.amount = amount;
	this.unit = unit;
	}

	function describe(data) {
	function dumpObject(obj) {
	var r = "";
	for (var property in obj) {
	if (obj.hasOwnProperty(property)) {
	var value = obj[property];
	if (typeof value == 'string')
	value = "'" + value + "'";
	else if (value == null)
	value = "null";
	else if (typeof value == 'object')
	{
	if (value instanceof Array)
	value = "[" + value + "]";
	else
	value = "{" + dumpObject(value) + "}";
	}

	if (value != "null")
	r += property + ": " + value + ", ";
	}
	}
	return r;
	}
	var result = dumpObject(data);
	if (result == "")
	return "(initial values)";
	return result;
	}

	function TestData(config) {
	this.config = config;
	this.name = describe(config);
	this.style = {};
	if (config.svgWidthStyle)
	this.style["width"] = config.svgWidthStyle;
	else
	this.mapPresentationalHintLength("width", config.svgWidthAttr);

	if (config.svgHeightStyle)
	this.style["height"] = config.svgHeightStyle;
	else
	this.mapPresentationalHintLength("height", config.svgHeightAttr);
	}

	TestData.prototype.mapPresentationalHintLength =
	function(cssProperty, attr) {
	if (attr) {
	var l = parseLength(attr);
	if (l)
	this.style[cssProperty] = l.amount + l.unit;
	}
	};

	TestData.prototype.computedWidthIsAuto = function() {
	return !this.style["width"] \|\| this.style["width"] == 'auto';
	};

	TestData.prototype.computedHeightIsAuto = function() {
	return !this.style["height"] \|\| this.style["height"] == 'auto' \|\|
	(parseLength(this.style["height"]).unit == '%' &&
	this.containerComputedHeightIsAuto());
	};

	TestData.prototype.containerComputedWidthIsAuto = function() {
	return !this.config.containerWidthStyle \|\|
	this.config.containerWidthStyle == 'auto';
	};

	TestData.prototype.containerComputedHeightIsAuto = function() {
	return !this.config.containerHeightStyle \|\|
	this.config.containerHeightStyle == 'auto';
	};

	TestData.prototype.intrinsicInformation = function() {
	var w = convertToPx(this.config.svgWidthAttr) \|\| 0;
	var h = convertToPx(this.config.svgHeightAttr) \|\| 0;
	var r = 0;
	if (w && h) {
	r = w / h;
	} else {
	var vb = parseViewBox(this.config.svgViewBoxAttr);
	if (vb) {
	r = vb[2] / vb[3];
	}
	if (r) {
	if (!w && h)
	w = h * r;
	else if (!h && w)
	h = w / r;
	}
	}
	return { width: w, height: h, ratio: r };
	};


	TestData.prototype.computeInlineReplacedSize = function() {
	var intrinsic = this.intrinsicInformation();
	var self = this;

	// http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height
	function calculateUsedHeight() {
	if (self.computedHeightIsAuto()) {
	if (self.computedWidthIsAuto() && intrinsic.height)
	return intrinsic.height;
	if (intrinsic.ratio)
	return calculateUsedWidth() / intrinsic.ratio;
	if (intrinsic.height)
	return intrinsic.height;
	return 150;
	}

	return convertToPx(self.style["height"],
	convertToPx(self.config.containerHeightStyle,
	self.outerHeight));
	}

	// http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
	function calculateUsedWidth() {
	if (self.computedWidthIsAuto()) {
	if (self.computedHeightIsAuto() && intrinsic.width)
	return intrinsic.width;
	if (!self.computedHeightIsAuto() && intrinsic.ratio)
	return calculateUsedHeight() * intrinsic.ratio;
	if (self.computedHeightIsAuto() && intrinsic.ratio) {
	if (self.containerComputedWidthIsAuto()) {
	// Note: While this is actually undefined in CSS
	// 2.1, use the suggested value by examining the
	// ancestor widths.
	return self.outerWidth;
	} else {
	return convertToPx(self.config.containerWidthStyle,
	self.outerWidth);
	}
	}
	if (intrinsic.width)
	return intrinsic.width;
	return 300;
	}

	if (self.containerComputedWidthIsAuto())
	return convertToPx(self.style["width"], self.outerWidth);
	else
	return convertToPx(self.style["width"],
	convertToPx(self.config.containerWidthStyle,
	self.outerWidth));
	}
	return { width: calculateUsedWidth(),
	height: calculateUsedHeight() };
	};

	var testContainer = document.querySelector('#testContainer');
	TestData.prototype.outerWidth = testContainer.getBoundingClientRect().width;
	TestData.prototype.outerHeight = testContainer.getBoundingClientRect().height;

	window.TestData = TestData;
	})();

	function setupContainer(testData, svgElement, options) {
	options = options \|\| {};

	var container = document.createElement("div");

	container.id = "container";
	if (testData.config.containerWidthStyle)
	container.style.width = testData.config.containerWidthStyle;

	if (testData.config.containerHeightStyle)
	container.style.height = testData.config.containerHeightStyle;

	if (options.pretty)
	container.appendChild(document.createTextNode("\n\t\t"));
	container.appendChild(svgElement);
	if (options.pretty)
	container.appendChild(document.createTextNode("\n\t"));

	return container;
	}

	function setupSVGElement(testData) {
	var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	svgElement.setAttribute("id", "test");
	if (testData.config.svgWidthStyle)
	svgElement.style.width = testData.config.svgWidthStyle;
	if (testData.config.svgHeightStyle)
	svgElement.style.height = testData.config.svgHeightStyle;
	if (testData.config.svgWidthAttr)
	svgElement.setAttribute("width", testData.config.svgWidthAttr);
	if (testData.config.svgHeightAttr)
	svgElement.setAttribute("height", testData.config.svgHeightAttr);
	if (testData.config.svgViewBoxAttr)
	svgElement.setAttribute("viewBox", testData.config.svgViewBoxAttr);

	return svgElement;
	}

	function buildDemo(testData) {
	// Non-essential debugging tool

	var options = { pretty: true };
	var expectedRect =
	testData.computeInlineReplacedSize();
	var container =
	setupContainer(testData, setupSVGElement(testData), options);

	var root = document.createElement("html");
	var style = document.createElement("style");

	style.textContent = "\n" +
	"\tbody { margin: 0; font-family: sans-serif }\n" +
	"\t#expected {\n" +
	"\t\twidth: " + (expectedRect.width) + "px; height: "
	+ (expectedRect.height) + "px;\n" +
	"\t\tborder: 10px solid lime; position: absolute;\n" +
	"\t\tbackground-color: red }\n" +
	"\t#testContainer { position: absolute;\n" +
	"\t\ttop: 10px; left: 10px; width: 800px; height: 600px }\n" +
	"\tsvg { background-color: green }\n" +
	"\t.result { position: absolute; top: 0; right: 0;\n" +
	"\t\tbackground-color: hsla(0,0%, 0%, 0.85); border-radius: 0.5em;\n" +
	"\t\tpadding: 0.5em; border: 0.25em solid black }\n" +
	"\t.pass { color: lime }\n" +
	"\t.fail { color: red }\n";

	root.appendChild(document.createTextNode("\n"));
	root.appendChild(style);
	root.appendChild(document.createTextNode("\n"));

	var script = document.createElement("script");
	script.textContent = "\n" +
	"onload = function() {\n" +
	"\tvar svgRect = \n" +
	"\t\tdocument.querySelector('#test').getBoundingClientRect();\n" +
	"\tpassed = (svgRect.width == " + expectedRect.width + " && " +
	"svgRect.height == " + expectedRect.height + ");\n" +
	"\tdocument.body.insertAdjacentHTML('beforeEnd',\n" +
	"\t\t'<span class=\"result '+ (passed ? 'pass' : 'fail') " +
	"+ '\">' + (passed ? 'Pass' : 'Fail') + '</span>');\n" +
	"};\n";

	root.appendChild(script);
	root.appendChild(document.createTextNode("\n"));

	var expectedElement = document.createElement("div");
	expectedElement.id = "expected";
	root.appendChild(expectedElement);
	root.appendChild(document.createTextNode("\n"));

	var testContainer = document.createElement("div");
	testContainer.id = "testContainer";
	testContainer.appendChild(document.createTextNode("\n\t"));
	testContainer.appendChild(container);
	testContainer.appendChild(document.createTextNode("\n"));
	root.appendChild(testContainer);
	root.appendChild(document.createTextNode("\n"));

	return "<!DOCTYPE html>\n" + root.outerHTML;
	}

	function doCombinationTest(values, func)
	{
	// Recursively construct all possible combinations of values and
	// send them to \|func\|. Example:
	//
	// values: [["X", ["a", "b"]],
	// ["Y", ["c", "d"]]]
	//
	// generates the objects:
	//
	// 1: { "X": "a", "Y": "c" }
	// 2: { "X": "a", "Y": "d" }
	// 3: { "X": "b", "Y": "c" }
	// 4: { "X": "b", "Y": "d" }
	//
	// and each will be sent to \|func\| with the corresponding prefixed
	// id (modulo order).

	var combinationId = 1;
	function doCombinationTestRecursive(slicedValues, config) {
	if (slicedValues.length > 0) {
	var configKey = slicedValues[0][0];
	slicedValues[0][1].forEach(function(configValue) {
	var new_config = {};
	for (k in config)
	new_config[k] = config[k];
	new_config[configKey] = configValue;
	doCombinationTestRecursive(slicedValues.slice(1), new_config);
	});
	} else {
	func(config, combinationId++);
	}
	}
	doCombinationTestRecursive(values, {});
	}

	var debugHint = function(id) { return "(append ?"+id+" to debug) " };
	var testSingleId;
	if (window.location.search) {
	testSingleId = window.location.search.substring(1);
	debugHint = function(id) { return ""; };
	}

	doCombinationTest(
	[["containerWidthStyle", [null, "400px"]],
	["containerHeightStyle", [null, "400px"]],
	["svgViewBoxAttr", [ null, "0 0 100 200" ]],
	["svgWidthStyle", [ null, "100px", "50%" ]],
	["svgHeightStyle", [ null, "100px", "50%" ]],
	["svgWidthAttr", [ null, "200", "25%" ]],
	["svgHeightAttr", [ null, "200", "25%" ]]],
	function(config, id) {
	if (!testSingleId \|\| testSingleId == id) {
	var testData = new TestData(config);

	var expectedRect =
	testData.computeInlineReplacedSize();
	var svgElement = setupSVGElement(testData);
	var container =
	setupContainer(testData, svgElement);

	var checkSize = function() {
	var svgRect =
	svgElement.getBoundingClientRect();

	try {
	assert_equals(svgRect.width,
	expectedRect.width,
	debugHint(id) + "Wrong width");
	assert_equals(svgRect.height,
	expectedRect.height,
	debugHint(id) + "Wrong height");
	} finally {
	testContainer.removeChild(container);
	if (testSingleId)
	document.body.removeChild(testContainer);
	}
	};

	testContainer.appendChild(container);
	test(checkSize, testData.name);
	}

	if (testSingleId == id) {
	var pad = function(n, width, z) {
	z = z \|\| '0';
	n = n + '';
	return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
	};

	var demo = buildDemo(testData);
	var iframe = document.createElement('iframe');
	iframe.style.width = (Math.max(900, expectedRect.width)) + "px";
	iframe.style.height = (Math.max(400, expectedRect.height)) + "px";
	iframe.src = "data:text/html;charset=utf-8," + encodeURIComponent(demo);
	document.body.appendChild(iframe);

	document.body.insertAdjacentHTML(
	'beforeEnd',
	'<p><a href="data:application/octet-stream;charset=utf-8;base64,' +
	btoa(demo) + '" download="svg-in-object-test-' + pad(id, 3) + '.html">Download</a></p>');
	}
	});