mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255
This commit is contained in:
James Graham
parent
b2a5225831
commit
1a81b18b9f
12321 changed files with 544385 additions and 6 deletions
0
tests/wpt/web-platform-tests/html/rendering/.gitkeep
Normal file
0
tests/wpt/web-platform-tests/html/rendering/.gitkeep
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>Option labels</title>
|
||||
<select size=12>
|
||||
<option><!-- No children, no label-->
|
||||
<option><!-- No children, empty label-->
|
||||
<option>label<!-- No children, label-->
|
||||
<option><!-- No children, namespaced label-->
|
||||
|
||||
<option>child<!-- Single child, no label-->
|
||||
<option>child<!-- Single child, empty label-->
|
||||
<option>label<!-- Single child, label-->
|
||||
<option>child<!-- Single child, namespaced label-->
|
||||
|
||||
<option>child node<!-- Two children, no label-->
|
||||
<option>child node<!-- Two children, empty label-->
|
||||
<option>label<!-- Two children, label-->
|
||||
<option>child node<!-- Two children, namespaced label-->
|
||||
</select>
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!doctype html>
|
||||
<title>Option labels</title>
|
||||
<link rel="match" href="option-label-ref.html">
|
||||
<select size=12></select>
|
||||
<script>
|
||||
var select = document.getElementsByTagName("select")[0], option;
|
||||
|
||||
option = document.createElement("option");
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.setAttribute("label", "")
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.setAttribute("label", "label")
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.setAttributeNS("http://www.example.com/", "label", "label")
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
option.setAttribute("label", "")
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
option.setAttribute("label", "label")
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
option.setAttributeNS("http://www.example.com/", "label", "label")
|
||||
select.appendChild(option);
|
||||
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
option.appendChild(document.createTextNode(" node "));
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
option.appendChild(document.createTextNode(" node "));
|
||||
option.setAttribute("label", "")
|
||||
select.appendChild(option);
|
||||
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
option.appendChild(document.createTextNode(" node "));
|
||||
option.setAttribute("label", "label")
|
||||
select.appendChild(option);
|
||||
|
||||
option = document.createElement("option");
|
||||
option.appendChild(document.createTextNode(" child "));
|
||||
option.appendChild(document.createTextNode(" node "));
|
||||
option.setAttributeNS("http://www.example.com/", "label", "label")
|
||||
select.appendChild(option);
|
||||
</script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"original_id":"links,-forms,-and-navigation"}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<title>The figure element</title>
|
||||
<link rel=author title=Ms2ger href=ms2ger@gmail.com>
|
||||
<link rel=help href=https://html.spec.whatwg.org/multipage/#the-figure-element>
|
||||
<style>
|
||||
body > div { margin: 1em 40px; }
|
||||
</style>
|
||||
<div>
|
||||
<div>Caption</div>
|
||||
Figure
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<title>The figure element</title>
|
||||
<link rel="match" href="figure-ref.html">
|
||||
<link rel=author title=Ms2ger href=ms2ger@gmail.com>
|
||||
<link rel=help href=https://html.spec.whatwg.org/multipage/#the-figure-element>
|
||||
<figure>
|
||||
<figcaption>Caption</figcaption>
|
||||
Figure
|
||||
</figure>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<ol><div><li>A</div></ol>
|
||||
<ol><div><li>A</div> <li>B</ol>
|
||||
<ol><div><li>A</div><div><li>B</div></ol>
|
||||
<ol reversed><div><li>A</div> <li>B</ol>
|
||||
<ol><div style=display:list-item>A</div><li>B</ol>
|
||||
<ol reversed><div style=display:list-item>A</div><li>B</ol>
|
||||
<ol reversed>
|
||||
<div><li>Two</li></div>
|
||||
<li>One</li>
|
||||
<li>Zero</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Three</li>
|
||||
<li style="display: none"></li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Table borders</title>
|
||||
<style>
|
||||
table {
|
||||
border-width: 1px;
|
||||
border-style: outset;
|
||||
}
|
||||
td {
|
||||
border-width: 1px;
|
||||
border-style: inset;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<link rel="match" href="table-border-1-ref.html">
|
||||
<title>Table borders</title>
|
||||
<table border>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border="">
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=null>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=undefined>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=foo>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=1>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=1foo>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=1%>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=-1>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=-1foo>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=-1%>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Table borders</title>
|
||||
<style>
|
||||
table {
|
||||
border-width: 1px;
|
||||
border-style: outset;
|
||||
}
|
||||
td {
|
||||
border-width: 1px;
|
||||
border-style: inset;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Table borders</title>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<link rel="match" href="table-border-2-ref.html">
|
||||
<title>Table borders</title>
|
||||
<table border=0>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=0foo>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=0%>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=+0>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=+0foo>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=+0%>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=-0>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=-0foo>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
<table border=-0%>
|
||||
<tr><td>Test
|
||||
</table>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Table layout attribute</title>
|
||||
<table border width=100% style=table-layout:fixed>
|
||||
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
|
||||
</table>
|
||||
<table border width=100% style=table-layout:fixed>
|
||||
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
|
||||
</table>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Table layout attribute</title>
|
||||
<table border width=100%>
|
||||
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
|
||||
</table>
|
||||
<table border width=100%>
|
||||
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
|
||||
</table>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Table layout attribute</title>
|
||||
<link rel="match" href="table-layout-ref.html">
|
||||
<meta name="assert"
|
||||
content="The layout attribute on table elements should have no effect.">
|
||||
<table border width=100% layout=fixed>
|
||||
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
|
||||
</table>
|
||||
<table border width=100% layout=auto>
|
||||
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
|
||||
</table>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<title>Test for capping percentages</title>
|
||||
<style>
|
||||
div { width:300px; background:yellow; height:50px; }
|
||||
table { width:150%; }
|
||||
td { background:blue; }
|
||||
</style>
|
||||
<div>
|
||||
<table cellspacing="0" cellpadding="0" border="0">
|
||||
<tr><td>parent div float=left</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<title>Test for capping percentages</title>
|
||||
<link rel="match" href="table-width-150percent-ref.html">
|
||||
<style>
|
||||
div { width:300px; background:yellow; height:50px; }
|
||||
td { background:blue; }
|
||||
</style>
|
||||
<div>
|
||||
<table width="150%" cellspacing="0" cellpadding="0" border="0">
|
||||
<tr><td>parent div float=left</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<html xmlns='http://www.w3.org/1999/xhtml'>
|
||||
<head>
|
||||
<title>body - LINK=yellow</title>
|
||||
</head>
|
||||
<body link="yellow">
|
||||
<p> Test for <b> link="yellow" </b> on body </p>
|
||||
|
||||
This <a href="test-body.xhtml">LINK</a> should be displayed in <b>yellow</b><i> if it has not been clicked before </i><br/>
|
||||
<p>Once clicked, the link will take default color of visited link.<br /></p>
|
||||
<p>To run this test again in browsers, delete your browsing history and navigate to this page.<br /></p>
|
||||
|
||||
<p>
|
||||
<i>Note - This test checks for User Agent requirement as per HTML5 spec NOT the author requirement</i>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>[body - TEXT=00ffff] Reference file</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
body {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This document should have text color 'Blue' using the RGB Hexadecimal color value of "0000ff". </p>
|
||||
<p>This test passes if the color of text above matches the image below.</p>
|
||||
<p><img src="/images/blue.png"/></p>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<html xmlns='http://www.w3.org/1999/xhtml'>
|
||||
<head>
|
||||
<title>body - TEXT=00ffff</title>
|
||||
<link rel="match" href="body_text_00ffff-ref.html"/>
|
||||
<meta name="assert" content="Test checks that User Agent requirement as per HTML5 spec NOT the author requirement."/>
|
||||
</head>
|
||||
<body text="0000ff">
|
||||
<p>This document should have text color 'Blue' using the RGB Hexadecimal color value of "0000ff". </p>
|
||||
<p>This test passes if the color of text above matches the image below.</p>
|
||||
<p><img src="/images/blue.png" /></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title> This is a test page</title>
|
||||
</head>
|
||||
<body>
|
||||
<p> To rerun this test, delete history and go <a href="body_link.xhtml">back </a> to previous test.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
// 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 outerWidth = testContainer.getBoundingClientRect().width;
|
||||
var outerHeight = 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(outerWidth, outerHeight);
|
||||
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);
|
||||
|
|
@ -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()
|
||||
Loading…
Add table
Add a link
Reference in a new issue