diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/replaced-elements')
35 files changed, 1161 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/.gitkeep b/testing/web-platform/tests/html/rendering/replaced-elements/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/.gitkeep diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/.gitkeep b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/.gitkeep diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-dim-ref.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-dim-ref.html new file mode 100644 index 000000000..b1adb6830 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-dim-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>img width/height - reference</title> +<style> +p { width: 50px; height: 50px; } +</style> +<p><img src=/images/green.png> +<p><img src=/images/green.png style="width: 10px"> +<p><img src=/images/green.png style="height: 10px"> +<p><img src=/images/green.png style="width: 10%"> +<p><img src=/images/green.png style="height: 10%"> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-dim.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-dim.html new file mode 100644 index 000000000..2d636c941 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-dim.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>img width/height</title> +<link rel=match href=img-dim-ref.html> +<style> +p { width: 50px; height: 50px; } +</style> +<p><img src=/images/green.png> +<p><img src=/images/green.png width=10> +<p><img src=/images/green.png height=10> +<p><img src=/images/green.png width=10%> +<p><img src=/images/green.png height=10%> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img_border-ref.xhtml b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img_border-ref.xhtml new file mode 100644 index 000000000..0050c542c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img_border-ref.xhtml @@ -0,0 +1,9 @@ +<html xmlns='http://www.w3.org/1999/xhtml'> +<head> +<title>IMG - Border in CSS</title> +</head> +<body> +<p><img src="../../../../../images/blue.png"/></p> +<p><img src="../../../../../images/blue.png" style="border-width:50px; border-style:solid;"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img_border_percent.xhtml b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img_border_percent.xhtml new file mode 100644 index 000000000..da74fb32b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img_border_percent.xhtml @@ -0,0 +1,10 @@ +<html xmlns='http://www.w3.org/1999/xhtml'> +<head> +<title>IMG - Border= value in percent</title> +<link rel="match" href="img_border-ref.xhtml"/> +</head> +<body> +<p><img src="../../../../../images/blue.png" border="0%"/></p> +<p><img src="../../../../../images/blue.png" border="50%"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border-ref.xhtml b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border-ref.xhtml new file mode 100644 index 000000000..6eaaa0ba1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border-ref.xhtml @@ -0,0 +1,8 @@ +<html xmlns='http://www.w3.org/1999/xhtml'> +<head> +<title>OBJECT - border in CSS</title> +</head> +<body> +<p><object data="../../../../images/blue.png" type="image/png" style="border-width:50px; border-style:solid;"></object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_perc.xhtml b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_perc.xhtml new file mode 100644 index 000000000..3663e9ce6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_perc.xhtml @@ -0,0 +1,9 @@ +<html xmlns='http://www.w3.org/1999/xhtml'> +<head> +<title>OBJECT - border=value in %</title> +<link rel="match" href="object_border-ref.xhtml"/> +</head> +<body> +<p><object data="../../../../images/blue.png" type="image/png" border="50%"></object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_pixel.xhtml b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_pixel.xhtml new file mode 100644 index 000000000..55f7f0a3b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_pixel.xhtml @@ -0,0 +1,9 @@ +<html xmlns='http://www.w3.org/1999/xhtml'> +<head> +<title>OBJECT - border=pixel</title> +<link rel="match" href="object_border-ref.xhtml"/> +</head> +<body> +<p><object data="../../../../images/blue.png" type="image/png" border="50"></object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/.gitkeep b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/.gitkeep diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-fallback-ref.html b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-fallback-ref.html new file mode 100644 index 000000000..9077591f4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-fallback-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<meta charset=utf-8> +<title>Canvas fallback content</title> +<p>The word "FAIL" should not be visible below this line. diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-fallback.html b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-fallback.html new file mode 100644 index 000000000..142024e67 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-fallback.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<title>Canvas fallback content</title> +<link rel=match href=canvas-fallback-ref.html> +<style> +#canvas2 { + display: inline; +} + +#canvas3 { + display: block; +} + +#canvas4 { + display: table; +} +</style> +<p>The word "FAIL" should not be visible below this line. +<p><canvas id=canvas1>FAIL</canvas> +<p><canvas id=canvas2>FAIL</canvas> +<p><canvas id=canvas3>FAIL</canvas> +<p><canvas id=canvas4>FAIL</canvas> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_scale.html b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_scale.html new file mode 100644 index 000000000..cdc464753 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_scale.html @@ -0,0 +1,23 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verify that canvases are scaled up to their computed size</title> +<link rel="match" href="canvas_scale_ref.html"> +<style> +canvas { + width: 20px; + height: 20px; +} +div { + line-height: 0; +} +</style> +<div><canvas width="16" height="16" data-color="#FF00FF"></canvas><canvas width="16" height="16" data-color="#00FF00"></canvas></div> +<div><canvas width="16" height="16" data-color="#0000FF"></canvas><canvas width="16" height="16" data-color="#FF00FF"></canvas></div> +<script> +var canvases = document.getElementsByTagName('canvas'); +for (var i = 0; i < canvases.length; i++) { + var ctx = canvases[i].getContext('2d'); + ctx.fillStyle = canvases[i].getAttribute('data-color'); + ctx.fillRect(0, 0, 16, 16); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_scale_ref.html b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_scale_ref.html new file mode 100644 index 000000000..2d1756f85 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_scale_ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<style> +span { + display: inline-block; + width: 20px; + height: 20px; +} +div { + line-height: 0; +} +</style> +<div><span style="background-color: #FF00FF"></span><span style="background-color: #00FF00"></span></div> +<div><span style="background-color: #0000FF"></span><span style="background-color: #FF00FF"></span></div> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_without_context_a.html b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_without_context_a.html new file mode 100644 index 000000000..b7398f8d5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_without_context_a.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="match" href="canvas_without_context_ref.html"> +<style> + div { + background-color: green; + width: 20px; + height: 20px; + } +</style> +</head> +<body> +<div><canvas width="20" height="20"></canvas></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_without_context_ref.html b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_without_context_ref.html new file mode 100644 index 000000000..ae0c9c8c8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas_without_context_ref.html @@ -0,0 +1,14 @@ +<html> +<head> +<style> + div { + background-color: green; + width: 20px; + height: 20px; + } +</style> +</head> +<body> +<div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/image-maps-0/.gitkeep b/testing/web-platform/tests/html/rendering/replaced-elements/image-maps-0/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/image-maps-0/.gitkeep diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/images/.gitkeep b/testing/web-platform/tests/html/rendering/replaced-elements/images/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/images/.gitkeep diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/images/space-ref.html b/testing/web-platform/tests/html/rendering/replaced-elements/images/space-ref.html new file mode 100644 index 000000000..0cf272e16 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/images/space-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset=utf-8> +<title>img hspace/vspace - reference</title> +<style> +span { background: blue; } +</style> +<div style=width:400px;> +<p><span><img src=/images/green.png></span> +<p><span><img src=/images/green.png style="margin: 0 10px"></span> +<p><span><img src=/images/green.png style="margin: 10px 0"></span> +<p><span><img src=/images/green.png style="margin: 0 10%"></span> +<p><span><img src=/images/green.png style="margin: 10% 0"></span> +</div> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/images/space.html b/testing/web-platform/tests/html/rendering/replaced-elements/images/space.html new file mode 100644 index 000000000..fee115dfc --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/images/space.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset=utf-8> +<title>img hspace/vspace</title> +<link rel=match href=space-ref.html> +<style> +span { background: blue; } +</style> +<div style=width:400px;> +<p><span><img src=/images/green.png></span> +<p><span><img src=/images/green.png hspace=10></span> +<p><span><img src=/images/green.png vspace=10></span> +<p><span><img src=/images/green.png hspace=10%></span> +<p><span><img src=/images/green.png vspace=10%></span> +</div> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/resources/svg-sizing.js b/testing/web-platform/tests/html/rendering/replaced-elements/resources/svg-sizing.js new file mode 100644 index 000000000..f54541e9e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/resources/svg-sizing.js @@ -0,0 +1,418 @@ +// Simple implementation of SVG sizing + +setup({explicit_done: true}); + +var SVGSizing = (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 mapPresentationalHintLength(testData, cssProperty, attr) { + if (attr) { + var l = parseLength(attr); + if (l) + testData.style[cssProperty] = l.amount + l.unit; + } + } + + function computedWidthIsAuto(testData) { + return !testData.style["width"] || testData.style["width"] == 'auto'; + } + + function computedHeightIsAuto(testData) { + return !testData.style["height"] || testData.style["height"] == 'auto' || + (parseLength(testData.style["height"]).unit == '%' && + containerComputedHeightIsAuto(testData)); + } + + function containerComputedWidthIsAuto(testData) { + return !testData.config.containerWidthStyle || + testData.config.containerWidthStyle == 'auto'; + } + + function containerComputedHeightIsAuto(testData) { + return !testData.config.containerHeightStyle || + testData.config.containerHeightStyle == 'auto'; + } + + function intrinsicInformation(testData) { + if (testData.config.placeholder == 'iframe') + return {}; + + var w = convertToPx(testData.config.svgWidthAttr) || 0; + var h = convertToPx(testData.config.svgHeightAttr) || 0; + var r = 0; + if (w && h) { + r = w / h; + } else { + var vb = parseViewBox(testData.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 }; + }; + + function contentAttributeForPlaceholder(testData) { + if (testData.config.placeholder == 'object') + return "data"; + else + return "src"; + } + + function TestData(config) { + this.config = config; + this.name = describe(config); + this.style = {}; + if (config.placeholder) { + mapPresentationalHintLength(this, "width", config.placeholderWidthAttr); + mapPresentationalHintLength(this, "height", config.placeholderHeightAttr); + } else { + if (config.svgWidthStyle) + this.style["width"] = config.svgWidthStyle; + else + mapPresentationalHintLength(this, "width", config.svgWidthAttr); + + if (config.svgHeightStyle) + this.style["height"] = config.svgHeightStyle; + else + mapPresentationalHintLength(this, "height", config.svgHeightAttr); + } + } + + TestData.prototype.computeInlineReplacedSize = function(outerWidth, outerHeight) { + var intrinsic = intrinsicInformation(this); + var self = this; + + // http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height + function calculateUsedHeight() { + if (computedHeightIsAuto(self)) { + if (computedWidthIsAuto(self) && 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, + outerHeight)); + } + + // http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width + function calculateUsedWidth() { + if (computedWidthIsAuto(self)) { + if (computedHeightIsAuto(self) && intrinsic.width) + return intrinsic.width; + if (!computedHeightIsAuto(self) && intrinsic.ratio) + return calculateUsedHeight() * intrinsic.ratio; + if (computedHeightIsAuto(self) && intrinsic.ratio) { + if (containerComputedWidthIsAuto(self)) { + // Note: While this is actually undefined in CSS + // 2.1, use the suggested value by examining the + // ancestor widths. + return outerWidth; + } else { + return convertToPx(self.config.containerWidthStyle, + outerWidth); + } + } + if (intrinsic.width) + return intrinsic.width; + return 300; + } + + if (containerComputedWidthIsAuto(self)) + return convertToPx(self.style["width"], outerWidth); + else + return convertToPx(self.style["width"], + convertToPx(self.config.containerWidthStyle, + outerWidth)); + } + return { width: calculateUsedWidth(), + height: calculateUsedHeight() }; + }; + + TestData.prototype.buildContainer = function (placeholder, options) { + options = options || {}; + + var container = document.createElement("div"); + + container.id = "container"; + if (this.config.containerWidthStyle) + container.style.width = this.config.containerWidthStyle; + + if (this.config.containerHeightStyle) + container.style.height = this.config.containerHeightStyle; + + if (options.pretty) + container.appendChild(document.createTextNode("\n\t\t")); + container.appendChild(placeholder); + if (options.pretty) + container.appendChild(document.createTextNode("\n\t")); + + return container; + }; + + TestData.prototype.buildSVGOrPlaceholder = function (options) { + options = options || {}; + var self = this; + + if (this.config.placeholder) { + var generateSVGURI = function(testData, encoder) { + var res = '<svg xmlns="http://www.w3.org/2000/svg"'; + function addAttr(attr, prop) { + if (testData.config[prop]) + res += ' ' + attr + '="' + testData.config[prop] + '"'; + } + addAttr("width", "svgWidthAttr"); + addAttr("height", "svgHeightAttr"); + addAttr("viewBox", "svgViewBoxAttr"); + res += '></svg>'; + return 'data:image/svg+xml' + encoder(res); + }; + var placeholder = document.createElement(this.config.placeholder); + if (options.pretty) { + placeholder.appendChild(document.createTextNode("\n\t\t\t")); + placeholder.appendChild( + document.createComment( + generateSVGURI(this, function(x) { return "," + x; }))); + placeholder.appendChild(document.createTextNode("\n\t\t")); + } + placeholder.setAttribute("id", "test"); + if (this.config.placeholderWidthAttr) + placeholder.setAttribute("width", this.config.placeholderWidthAttr); + if (this.config.placeholderHeightAttr) + placeholder.setAttribute("height", this.config.placeholderHeightAttr); + placeholder.setAttribute(contentAttributeForPlaceholder(this), + generateSVGURI(this, function(x) { + return ";base64," + btoa(x); + })); + return placeholder; + } else { + var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svgElement.setAttribute("id", "test"); + if (self.config.svgWidthStyle) + svgElement.style.width = self.config.svgWidthStyle; + if (self.config.svgHeightStyle) + svgElement.style.height = self.config.svgHeightStyle; + if (self.config.svgWidthAttr) + svgElement.setAttribute("width", self.config.svgWidthAttr); + if (self.config.svgHeightAttr) + svgElement.setAttribute("height", self.config.svgHeightAttr); + if (self.config.svgViewBoxAttr) + svgElement.setAttribute("viewBox", self.config.svgViewBoxAttr); + return svgElement; + } + }; + + TestData.prototype.buildDemo = function (expectedRect, id) { + // Non-essential debugging tool + var self = this; + + function buildDemoSerialization() { + var outerWidth = 800; + var outerHeight = 600; + + var options = { pretty: true }; + var container = + self.buildContainer(self.buildSVGOrPlaceholder(options), options); + + var root = document.createElement("html"); + var style = document.createElement("style"); + + style.textContent = "\n" + + "\tbody { margin: 0; font-family: sans-serif }\n" + + "\tiframe { border: none }\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: " + outerWidth + "px;\n" + + "\t\theight: " + outerHeight + "px }\n" + + "\t#test { 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 pad(n, width, z) { + z = z || '0'; + n = n + ''; + return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; + } + + function heightToDescription(height) { + if (!height || height == "auto") + return "auto"; + if (parseLength(height).unit == '%') + return "percentage"; + return "fixed"; + } + + var demoRoot = document.querySelector('#demo'); + if (demoRoot) { + var demo = buildDemoSerialization(); + 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); + demoRoot.appendChild(iframe); + demoRoot.insertAdjacentHTML( + 'beforeEnd', + '<p><a href="data:application/octet-stream;charset=utf-8;base64,' + + btoa(demo) + '" download="svg-in-' + this.config.placeholder + "-" + + heightToDescription(this.config.placeholderHeightAttr) + "-" + pad(id, 3) + + '.html">Download</a></p>'); + } + }; + + return { + TestData: TestData, + doCombinationTest: function(values, func, testSingleId) { + function computeConfig(id) { + id--; + var multiplier = 1; + var config = {}; + for (var i=0; i<values.length; i++) { + // Compute offset into current array + var ii = (Math.floor(id / multiplier)) % values[i][1].length; + // Set corresponding value + config[values[i][0]] = values[i][1][ii]; + // Compute new multiplier + multiplier *= values[i][1].length; + } + if (id >= multiplier) + return null; + return config; + } + + function cont(id) { + var config = computeConfig(id); + if (config && (!testSingleId || testSingleId == id)) { + var next = function() {func(config, id, cont)}; + // Make sure we don't blow the stack, without too much slowness + if (id % 20 === 0) { + setTimeout(next, 0); + } else { + next(); + } + } else { + done(); + } + }; + + if (testSingleId) + cont(testSingleId); + else + cont(1); + } + }; +})(); diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-embedded-sizing.js b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-embedded-sizing.js new file mode 100644 index 000000000..5dc5131c5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-embedded-sizing.js @@ -0,0 +1,96 @@ +// global async_test, assert_equals +// +// This test generates a couple of scenarios (each a +// SVGSizing.TestData) for sizing inline <svg> and uses a simple +// JavaScript sizing implementation for comparison. +// +// The tests loops through different combinations of: +// +// * width and height on <object>, <iframe> (input dependent) +// +// * width and height on <svg> +// +// * 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. +// Little focus is put on variations within an attribute that doesn't +// affect the sizing behavior. +// +// To debug a specific test, append ?<test-id> to the URL. An <iframe> +// is generated with equivalent test and the source code of the test +// can be downloaded. + +var debugHint = function(id) { return "(append ?"+id+" to debug) "; }; +var testSingleId; +if (window.location.search) { + testSingleId = parseInt(window.location.search.substring(1)); + debugHint = function(id) { return ""; }; +} + +function testPlaceholderWithHeight(placeholder, + placeholderHeightAttr) { + var testContainer = document.querySelector('#testContainer'); + var outerWidth = testContainer.getBoundingClientRect().width; + var outerHeight = testContainer.getBoundingClientRect().height; + + SVGSizing.doCombinationTest( + [["placeholder", [ placeholder ]], + ["containerWidthStyle", [null, "400px"]], + ["containerHeightStyle", [null, "400px"]], + ["placeholderWidthAttr", [null, "100", "50%"]], + ["placeholderHeightAttr", [placeholderHeightAttr]], + ["svgViewBoxAttr", [ null, "0 0 100 200" ]], + ["svgWidthAttr", [ null, "200", "25%" ]], + ["svgHeightAttr", [ null, "200", "25%" ]]], + function (config, id, cont) { + var testData = new SVGSizing.TestData(config); + var t = async_test(testData.name); + var expectedRect = + testData.computeInlineReplacedSize(outerWidth, outerHeight); + var placeholder = testData.buildSVGOrPlaceholder(); + var container = + testData.buildContainer(placeholder); + + var checkSize = function() { + var placeholderRect = + placeholder.getBoundingClientRect(); + + try { + assert_equals(placeholderRect.width, + expectedRect.width, + debugHint(id) + "Wrong width"); + assert_equals(placeholderRect.height, + expectedRect.height, + debugHint(id) + "Wrong height"); + } finally { + testContainer.removeChild(container); + if (testSingleId) + document.body.removeChild(testContainer); + cont(id+1); + } + t.done(); + }; + + if (!config.placeholder) { + testContainer.appendChild(container); + test(checkSize, testData.name); + } else { + t.step(function() { + placeholder.addEventListener('load', function() { + // setTimeout is a work-around to let engines + // finish layout of child browsing contexts even + // after the load event + setTimeout(t.step_func(checkSize), 0); + }); + testContainer.appendChild(container); + }); + } + if (testSingleId == id) + testData.buildDemo(expectedRect, id); + }, testSingleId); +} diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-auto.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-auto.html new file mode 100644 index 000000000..4c3fefe88 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-auto.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <iframe></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("iframe", null)</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-fixed.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-fixed.html new file mode 100644 index 000000000..ae3328c6a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-fixed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <iframe></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("iframe", '100px')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-percentage.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-percentage.html new file mode 100644 index 000000000..da00c0680 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-iframe-percentage.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <iframe></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("iframe", '100%')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-auto.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-auto.html new file mode 100644 index 000000000..cef353067 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-auto.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <img></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("img", null)</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-fixed.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-fixed.html new file mode 100644 index 000000000..e8ad0dc93 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-fixed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <img></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("img", '100px')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-percentage.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-percentage.html new file mode 100644 index 000000000..7bd5d9031 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-img-percentage.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <img></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("img", '100%')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-auto.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-auto.html new file mode 100644 index 000000000..7d79d2a42 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-auto.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <object></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("object", null)</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-fixed.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-fixed.html new file mode 100644 index 000000000..75f763625 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-fixed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <object></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("object", '100px')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-percentage.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-percentage.html new file mode 100644 index 000000000..8f82836e1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-embedded-sizing/svg-in-object-percentage.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This file is generated by gen-svgsizing-tests.py --> +<html> + <head> + <title>SVG sizing: <object></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("object", '100%')</script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.html b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.html new file mode 100644 index 000000000..2b3cf6536 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>SVG sizing: inline</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px; + } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-inline.js"></script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.js b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.js new file mode 100644 index 000000000..9b7fca050 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/svg-inline-sizing/svg-inline.js @@ -0,0 +1,79 @@ +// global async_test, assert_equals +// +// This test generates a couple of scenarios (each a +// SVGSizing.TestData) for sizing inline <svg> and uses a simple +// JavaScript sizing implementation for comparison. +// +// The tests loops through different combinations of: +// +// * width and height attributes and style on <svg> +// +// * viewBox on <svg> (gives intrinsic ratio) +// +// * width and height on containing block of <svg> +// +// All these may contribute to the final size of the SVG. The test +// focuses on the size of the CSS box generated by the SVG. Little +// focus is put on variations within an attribute that doesn't affect +// the final size. +// +// 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. + +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 ""; }; +} + +var testContainer = document.querySelector('#testContainer'); +var testContainerWidth = testContainer.getBoundingClientRect().width; +var testContainerHeight = testContainer.getBoundingClientRect().height; + +SVGSizing.doCombinationTest( + [["placeholder", [ null ]], + ["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, cont) { + var testData = new SVGSizing.TestData(config); + + var expectedRect = + testData.computeInlineReplacedSize(testContainerWidth, + testContainerHeight); + var svgElement = testData.buildSVGOrPlaceholder(); + var container = + testData.buildContainer(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); + cont(id+1); + } + }; + + testContainer.appendChild(container); + test(checkSize, testData.name); + + if (testSingleId == id) { + testData.buildDemo(expectedRect, id); + } + }, testSingleId); diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/toolbars-0/.gitkeep b/testing/web-platform/tests/html/rendering/replaced-elements/toolbars-0/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/toolbars-0/.gitkeep diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/tools/gen-svgsizing-tests.py b/testing/web-platform/tests/html/rendering/replaced-elements/tools/gen-svgsizing-tests.py new file mode 100644 index 000000000..5ba69f8ab --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/tools/gen-svgsizing-tests.py @@ -0,0 +1,55 @@ +from string import Template +import os +import sys + +template = Template("""<!DOCTYPE html> +<!-- This file is generated by $generator --> +<html> + <head> + <title>SVG sizing: <$placeholder></title> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../resources/svg-sizing.js"></script> + <style> + #testContainer { + position: absolute; + left: 0; + top: 0; + width: 800px; + height: 600px + } + iframe { border: 0 } + </style> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#replaced-elements"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-dim-width"> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace"> + </head> + <body> + <div id="log"></div> + <div id="testContainer"></div> + <div id="demo"></div> + <script src="svg-embedded-sizing.js"></script> + <script>testPlaceholderWithHeight("$placeholder", $placeholderHeightAttr)</script> + </body> +</html> +""") + +placeholders = [ "object", "iframe", "img" ] +placeholderHeightAttrs = [ "null", "'100px'", "'100%'" ] +placeholderHeightAttrsDescriptions = [ "auto", "fixed", "percentage" ] + +try: + os.makedirs("../svg-embedded-sizing") +except OSError: + pass + +for placeholder in placeholders: + for i, placeholderHeightAttr in enumerate(placeholderHeightAttrs): + testContent = template.substitute(placeholder=placeholder, placeholderHeightAttr=placeholderHeightAttr, generator=sys.argv[0]) + filename = "../svg-embedded-sizing/svg-in-%s-%s.html" % (placeholder, placeholderHeightAttrsDescriptions[i]) + f = open(filename, "w") + f.write(testContent) + f.close() |