mirror of
https://github.com/servo/servo.git
synced 2025-08-16 19:05:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,71 @@
|
|||
<!doctype html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<link rel='stylesheet' href='../support/base.css' />
|
||||
|
||||
<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" />
|
||||
<main>
|
||||
<h4>"Computing row measures"</h4>
|
||||
<p>This is testing that the table root's minimum is max(table-root width, capmin, gridmin) <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec Text</a></p>
|
||||
|
||||
<hr/>
|
||||
<table id="one" cellspacing="0" cellpadding="0">
|
||||
<tbody style="height: 1px;">
|
||||
<tr style="height: 10px;">
|
||||
<td style="height: 1px;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="two" cellspacing="0" cellpadding="0">
|
||||
<tbody style="height: 10px;">
|
||||
<tr style="height: 1px;">
|
||||
<td style="height: 1px;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="three" cellspacing="0" cellpadding="0">
|
||||
<tbody style="height: 1px;">
|
||||
<tr style="height: 1px;">
|
||||
<td style="height: 10px;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="four" cellspacing="0" cellpadding="0">
|
||||
<tbody style="height: 10px;">
|
||||
<tr>
|
||||
<td style="height: 1px;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
var i = 1;
|
||||
generate_tests(assert_equals, [
|
||||
[
|
||||
"Checking intermediate min-content height for span 1 (1)",
|
||||
document.getElementById('one').offsetHeight,
|
||||
10
|
||||
],
|
||||
[
|
||||
"Checking intermediate min-content height for span 1 (2)",
|
||||
document.getElementById('two').offsetHeight,
|
||||
1
|
||||
],
|
||||
[
|
||||
"Checking intermediate min-content height for span 1 (3)",
|
||||
document.getElementById('three').offsetHeight,
|
||||
10
|
||||
],
|
||||
[
|
||||
"Checking intermediate min-content height for span 1 (4)",
|
||||
document.getElementById('four').offsetHeight,
|
||||
10
|
||||
]
|
||||
]);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!doctype html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<link rel='stylesheet' href='../support/base.css' />
|
||||
|
||||
<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" />
|
||||
<main>
|
||||
<h1>Width Distribution</h1>
|
||||
<h4>"Computing column measures"</h4>
|
||||
<p>This is testing intermediate min-content width for span 2</p>
|
||||
|
||||
<hr/>
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<colgroup style="width: auto;">
|
||||
<col style="width: 10px;"></col>
|
||||
<col style="width: 20px;"></col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="one" style="width: 1px;"></td>
|
||||
<td style="width: 2px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="width: 51px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<colgroup style="width: auto;">
|
||||
<col style="width: 10px;"></col>
|
||||
<col style="width: auto;"></col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="two" style="width: 1px;"></td>
|
||||
<td style="width: auto;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="width: 51px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<colgroup style="width: 51px;">
|
||||
<col style="width: 10px;"></col>
|
||||
<col style="width: 20px;"></col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="three" style="width: 1px;"></td>
|
||||
<td style="width: 2px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<colgroup style="width: 51px;">
|
||||
<col style="width: 20px;"></col>
|
||||
<col style="width: auto;"></col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td style="width: 10px;"></td>
|
||||
<td id="four" style="width: 20px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
table { margin-bottom: 10px; height: 50px; }
|
||||
td { outline: 1px solid red; outline-offset: -1px; }
|
||||
</style>
|
||||
<script>
|
||||
var i = 1;
|
||||
generate_tests(assert_equals, [
|
||||
[
|
||||
"Checking intermediate min-content width for span 2 (1)",
|
||||
document.getElementById('one').offsetWidth,
|
||||
17
|
||||
],
|
||||
[
|
||||
"Checking intermediate min-content width for span 2 (2)",
|
||||
document.getElementById('two').offsetWidth,
|
||||
10
|
||||
],
|
||||
[
|
||||
"Checking intermediate min-content width for span 2 (3)",
|
||||
document.getElementById('three').offsetWidth,
|
||||
10
|
||||
],
|
||||
[
|
||||
"Checking intermediate min-content width for span 2 (4)",
|
||||
document.getElementById('four').offsetWidth,
|
||||
51
|
||||
]
|
||||
]);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
<!doctype html>
|
||||
<!--------------------------------------------------------------------------------------->
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<link rel='stylesheet' href='../support/base.css' />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" />
|
||||
<script>
|
||||
|
||||
function assertOffsetWidthEquals(a,targetValue) {
|
||||
var desc = document.querySelector('main > hr:last-of-type + p + p') || document.querySelectorAll('main > hr + p + p')[document.querySelectorAll('main > hr + p + p').length-1];
|
||||
var root = document.querySelector('main > div:last-of-type') || document.querySelectorAll('main > div')[document.querySelectorAll('main > div').length-1];
|
||||
generate_tests(assert_equals, [
|
||||
[
|
||||
desc.textContent,
|
||||
root.querySelector("[target="+a+"]").offsetWidth,
|
||||
targetValue
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
function assertOffsetHeightEquals(a,targetValue) {
|
||||
var desc = document.querySelector('main > hr:last-of-type + p + p') || document.querySelectorAll('main > hr + p + p')[document.querySelectorAll('main > hr + p + p').length-1];
|
||||
var root = document.querySelector('main > div:last-of-type') || document.querySelectorAll('main > div')[document.querySelectorAll('main > div').length-1];
|
||||
generate_tests(assert_equals, [
|
||||
[
|
||||
desc.textContent,
|
||||
root.querySelector("[target="+a+"]").offsetHeight,
|
||||
targetValue
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<main>
|
||||
|
||||
<h1>Height distribution</h1>
|
||||
<p>Check that percentages are accounted for correctly for table-cell children</p>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Percentages resolve based on the column width</p>
|
||||
<div>
|
||||
<x-table style="width: 100px; height: 100px;">
|
||||
<x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue"></div></x-td></x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetWidthEquals('a',100);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Percentages resolve based on the row height</p>
|
||||
<div>
|
||||
<x-table style="width: 100px; height: 100px;">
|
||||
<x-tr><x-td><div target=a style="width: 100px; height: 100%; background: blue"></div></x-td></x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetHeightEquals('a',100);
|
||||
|
||||
</script>
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Percentages resolve based on the final column width</p>
|
||||
<div>
|
||||
<x-table style="width: 0px; height: 100px; background: red;">
|
||||
<x-tr><x-td style="width:0px;height:0px;"><div target=a style="width: 100%; height: 100px; background: blue"></div></x-td></x-tr>
|
||||
<x-tr><x-td style="width:0px;height:0px;"><div target=a style="width: 100px; height: 0px"></div></x-td></x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetWidthEquals('a',100);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Percentages resolve based on the final row height</p>
|
||||
<div>
|
||||
<x-table style="width: 100px; height: 0px; background: red;">
|
||||
<x-tr>
|
||||
<x-td style="width: 0px; height: 0px;"><div target=a style="width: 100px; height: 100%; background: blue"></div></x-td>
|
||||
<x-td style="width: 0px; height: 0px;"><div target=a style="width: 0px; height: 100px; background: red"></div></x-td>
|
||||
</x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetHeightEquals('a',100);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a blue and cyan rectangles of the same width:</p>
|
||||
<p>Unresolvable percentage widths are resolved as auto in first pass (replaced elements)</p>
|
||||
<div>
|
||||
<x-table style="width: 0px; height: 18px; background: red;">
|
||||
<x-tr><x-td><input target=a style="width: 100%; height: 100%; background: blue; vertical-align: top; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"/></x-td></x-tr>
|
||||
</x-table>
|
||||
<input style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;" />
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetWidthEquals('a',document.querySelector('input[style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"]').offsetWidth);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a blue and cyan rectangles below of the same height:</p>
|
||||
<p>Unresolvable percentage heights are resolved as auto in first pass (replaced elements)</p>
|
||||
<div>
|
||||
<x-table style="width: auto; height: 0px; background: red;">
|
||||
<x-tr><x-td><input target=a style="width: 100%; height: 100%; background: blue; vertical-align: top; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"/></x-td></x-tr>
|
||||
</x-table>
|
||||
<input style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;" />
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetHeightEquals('a',document.querySelector('input[style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"]').offsetHeight);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Unresolvable percentage widths are resolved as auto in first pass (unscrollable overflow)</p>
|
||||
<div>
|
||||
<x-table style="width: 0px; height: 100px; background: red;">
|
||||
<x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue; overflow: hidden;"><div target=a style="width: 100px; height: 0px"></div></div></x-td></x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetWidthEquals('a',100);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Unresolvable percentage heights are resolved as auto in first pass (unscrollable overflow)</p>
|
||||
<div>
|
||||
<x-table style="width: 100px; height: 0px; background: red;">
|
||||
<x-tr>
|
||||
<x-td><div target=a style="width: 100px; height: 100%; background: blue; overflow: hidden;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td>
|
||||
</x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetHeightEquals('a',100);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Unresolvable percentage widths are resolved as auto in first pass (scrollable overflow)</p>
|
||||
<div>
|
||||
<x-table style="width: 0px; height: 100px; background: red;">
|
||||
<x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue; overflow: auto;"><div target=a style="width: 100px; height: 0px"></div></div></x-td></x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetWidthEquals('a',100);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<hr/><!------------------------------------------------------------------------------------------------------------>
|
||||
<p>There should be a 100px blue square below:</p>
|
||||
<p>Unresolvable percentage heights are resolved as 0px in first pass (scrollable overflow)</p>
|
||||
<div>
|
||||
<x-table style="width: 100px; height: 100px; background: red;">
|
||||
<x-tr><x-td><div target=a style="width: 100px; height: 100%; background: red; overflow: auto;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td></x-tr>
|
||||
<x-tr><x-td><div style="width: 100px; height: 100%; background: blue; overflow: hidden;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td></x-tr>
|
||||
</x-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
assertOffsetHeightEquals('a',0);
|
||||
|
||||
</script>
|
||||
|
||||
</main>
|
||||
Loading…
Add table
Add a link
Reference in a new issue