mirror of
https://github.com/servo/servo.git
synced 2025-08-05 05:30:08 +01:00
Update web-platform-tests to revision 34f9b93c2749043ba68485dea92d1fb554075e60
This commit is contained in:
WPT Sync Bot
parent
fd64f11efe
commit
ace02666c2
75 changed files with 1496 additions and 120 deletions
|
|
@ -0,0 +1,7 @@
|
|||
<!doctype html>
|
||||
<title>Reference for fieldset border gap</title>
|
||||
<style>
|
||||
div { position: relative; top: 25px; width: 100px; height: 50px; background: lime; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!doctype html>
|
||||
<title>fieldset border gap</title>
|
||||
<link rel=match href=fieldset-border-gap-ref.html>
|
||||
<style>
|
||||
fieldset, legend { margin: 0; padding: 0; }
|
||||
fieldset { border: none; border-top: 100px solid red; width: 100px; }
|
||||
legend { width: 100px; height: 50px; background: lime; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<fieldset><legend></legend></fieldset>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for fieldset containing block</title>
|
||||
<style>
|
||||
p { margin: 0; height: 100px }
|
||||
div { position: absolute; top: 108px; width: 100px; height: 100px; background: lime; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>fieldset containing block</title>
|
||||
<link rel=match href=fieldset-containing-block-ref.html>
|
||||
<style>
|
||||
p { margin: 0; height: 100px }
|
||||
fieldset { position: relative; border: none; padding: 0; margin: 0; }
|
||||
legend { padding: 0; width: 100px; height: 50px; background: lime; }
|
||||
div { position: absolute; top: 0; width: 100px; height: 50px; background: lime; }
|
||||
.behind { height:100px; top: 108px; background: red; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div class="behind"></div>
|
||||
<fieldset><legend></legend><div></div></fieldset>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>fieldset and div with display: contents</title>
|
||||
<link rel=fieldset-foo-ref.html>
|
||||
<style>
|
||||
div { display: contents; }
|
||||
</style>
|
||||
<p>There should be a normal fieldset below with the legend "Foo".</p>
|
||||
<fieldset>
|
||||
<div>
|
||||
<legend>Foo</legend>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference with a fieldset and legend "Foo"</title>
|
||||
<p>There should be a normal fieldset below with the legend "Foo".</p>
|
||||
<fieldset>
|
||||
<legend>Foo</legend>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>fieldset and shadow DOM</title>
|
||||
<link rel=fieldset-foo-ref.html>
|
||||
<p>There should be a normal fieldset below with the legend "Foo".</p>
|
||||
<template id="my-fieldset">
|
||||
<fieldset><slot name="my-text"></slot></fieldset>
|
||||
</template>
|
||||
|
||||
<my-fieldset>
|
||||
<legend slot="my-text">Foo</legend>
|
||||
</my-fieldset>
|
||||
|
||||
<script>
|
||||
customElements.define('my-fieldset',
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
const template = document.getElementById('my-fieldset');
|
||||
const templateContent = template.content;
|
||||
|
||||
this.attachShadow({mode: 'open'}).appendChild(
|
||||
templateContent.cloneNode(true)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>rendered legend and CSS display</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<fieldset><legend id="ref">x</legend></fieldset>
|
||||
<fieldset><legend id="test">x</legend></fieldset>
|
||||
<script>
|
||||
const refElm = document.querySelector('#ref');
|
||||
const refStyle = getComputedStyle(refElm);
|
||||
const testElm = document.querySelector('#test');
|
||||
const values = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell',
|
||||
'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root','run-in','inline',
|
||||
'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container',
|
||||
'grid', 'inline-grid', 'flex', 'inline-flex'];
|
||||
|
||||
for (const val of values) {
|
||||
test(() => {
|
||||
testElm.style.removeProperty('display');
|
||||
testElm.style.display = val;
|
||||
const computed = getComputedStyle(testElm);
|
||||
// Note that computed value is different from the used value.
|
||||
// E.g., if ruby is not supported, the following assertion will
|
||||
// fail as the computed value of display will be block.
|
||||
// If ruby is supported, computed.display will return "ruby",
|
||||
// but the used value is supposed to be "block".
|
||||
assert_equals(computed.display, val, `display: ${val} is not supported`);
|
||||
assert_equals(computed.width, refStyle.width, 'width');
|
||||
assert_equals(testElm.offsetLeft, refElm.offsetLeft, 'offsetLeft');
|
||||
}, `rendered legend with display: ${val}`);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!doctype html>
|
||||
<title>legend and float and position: absolute/fixed</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
fieldset { margin: 0; padding: 20px; border: 10px solid; width: 300px; }
|
||||
legend { height: 10px; }
|
||||
#legend1 { float: left; }
|
||||
#legend2 { float: right; }
|
||||
#legend3 { position: absolute; }
|
||||
#legend4 { position: fixed; }
|
||||
</style>
|
||||
<fieldset id=fieldset>
|
||||
<div>div</div>
|
||||
<legend id=legend1>legend1</legend>
|
||||
<legend id=legend2>legend2</legend>
|
||||
<legend id=legend3>legend3</legend>
|
||||
<legend id=legend4>legend4</legend>
|
||||
<legend id=legend5>legend5</legend>
|
||||
</fieldset>
|
||||
<script>
|
||||
const fieldset = document.getElementById('fieldset');
|
||||
const legends = document.getElementsByTagName('legend');
|
||||
const [legend1, legend2, legend3, legend4, legend5] = legends;
|
||||
const expectedTop = 0;
|
||||
const expectedLeft = 10 + 20;
|
||||
|
||||
function assert_rendered_legend(legend) {
|
||||
assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`);
|
||||
assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`);
|
||||
for (const other of legends) {
|
||||
if (other === legend) {
|
||||
continue;
|
||||
}
|
||||
if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) {
|
||||
assert_unreached(`${other.id} should not be the "rendered legend"`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
test(t => {
|
||||
assert_rendered_legend(legend5);
|
||||
}, 'no dynamic changes');
|
||||
|
||||
test(t => {
|
||||
const legend = document.createElement('legend');
|
||||
t.add_cleanup(() => {
|
||||
legend.remove();
|
||||
});
|
||||
legend.id = 'script-inserted';
|
||||
legend.textContent = 'script-inserted legend';
|
||||
fieldset.insertBefore(legend, legend1);
|
||||
assert_rendered_legend(legend);
|
||||
legend.remove();
|
||||
assert_rendered_legend(legend5);
|
||||
}, 'inserting a new legend and removing it again');
|
||||
|
||||
test(t => {
|
||||
t.add_cleanup(() => {
|
||||
legend1.id = 'legend1';
|
||||
legend2.id = 'legend2';
|
||||
});
|
||||
legend2.id = '';
|
||||
assert_rendered_legend(legend2);
|
||||
legend1.id = '';
|
||||
assert_rendered_legend(legend1);
|
||||
legend1.id = 'legend1';
|
||||
assert_rendered_legend(legend2);
|
||||
legend2.id = 'legend2';
|
||||
assert_rendered_legend(legend5);
|
||||
}, 'dynamic changes to float');
|
||||
|
||||
test(t => {
|
||||
t.add_cleanup(() => {
|
||||
legend3.id = 'legend3';
|
||||
legend4.id = 'legend4';
|
||||
});
|
||||
legend4.id = '';
|
||||
assert_rendered_legend(legend4);
|
||||
legend3.id = '';
|
||||
assert_rendered_legend(legend3);
|
||||
legend3.id = 'legend3';
|
||||
assert_rendered_legend(legend4);
|
||||
legend4.id = 'legend4';
|
||||
assert_rendered_legend(legend5);
|
||||
}, 'dynamic changes to position');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>legend and flexbox, grid & multicol</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<style>
|
||||
legend { width: 200px; background: silver }
|
||||
#flex { display: flex; }
|
||||
#inline-flex { display: inline-flex; }
|
||||
#grid { display: grid; }
|
||||
#inline-grid { display: inline-grid; }
|
||||
#grid, #inline-grid { grid-template-columns: auto auto }
|
||||
#multicol { columns: 2; }
|
||||
</style>
|
||||
<fieldset><legend id=ref>12</legend></fieldset>
|
||||
<fieldset><legend id=flex><div>1</div><div>2</div></legend></fieldset>
|
||||
<fieldset><legend id=inline-flex><div>1</div><div>2</div></legend></fieldset>
|
||||
<fieldset><legend id=grid><div>1</div><div>2</div></legend></fieldset>
|
||||
<fieldset><legend id=inline-grid><div>1</div><div>2</div></legend></fieldset>
|
||||
<fieldset><legend id=multicol><div>1</div><div>2</div></legend></fieldset>
|
||||
<script>
|
||||
const ref = document.getElementById('ref');
|
||||
for (const id of ["flex", "inline-flex", "grid", "inline-grid", "multicol"]) {
|
||||
test(() => {
|
||||
const elm = document.getElementById(id);
|
||||
assert_equals(elm.offsetHeight, ref.offsetHeight, 'offsetHeight');
|
||||
if (id !== "multicol") {
|
||||
assert_equals(getComputedStyle(elm).display, id, 'display');
|
||||
}
|
||||
}, id);
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue