mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 50ff4f970fd8592a9f436d4e86e7d572de143260
This commit is contained in:
WPT Sync Bot
parent
82bbf3ad45
commit
8ea5658199
150 changed files with 4737 additions and 998 deletions
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<title>fieldset percentage block size</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<style>
|
||||
fieldset { block-size: 100px; margin: 20px; padding: 0; border: 10px solid; }
|
||||
.rendered-legend { block-size: 80%; background: lime; padding: 0; }
|
||||
.second-legend { block-size: 100%; background: yellow; padding: 0; }
|
||||
fieldset > div { block-size: 100%; background: fuchsia; }
|
||||
</style>
|
||||
<div style="writing-mode: horizontal-tb">
|
||||
<fieldset>
|
||||
<legend class="rendered-legend">rendered legend</legend>
|
||||
<legend class="second-legend">second legend</legend>
|
||||
<div>div</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div style="writing-mode: vertical-lr">
|
||||
<fieldset>
|
||||
<legend class="rendered-legend">rendered legend</legend>
|
||||
<legend class="second-legend">second legend</legend>
|
||||
<div>div</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div style="writing-mode: vertical-rl">
|
||||
<fieldset>
|
||||
<legend class="rendered-legend">rendered legend</legend>
|
||||
<legend class="second-legend">second legend</legend>
|
||||
<div>div</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
for (const div of document.querySelectorAll('div[style]')) {
|
||||
for (const el of div.firstElementChild.children) {
|
||||
test(() => {
|
||||
const expected = el.textContent === 'rendered legend' ? '80px' : '30px';
|
||||
// 30px because: 100px - (max(0, legend-block-size - border-block-start))
|
||||
assert_equals(getComputedStyle(el).blockSize, expected);
|
||||
}, `${el.textContent} (${div.getAttribute('style')})`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
body { margin: 0; }
|
||||
.fieldset { margin: 2em 1em 1em 1em; border: 1em solid green; }
|
||||
.legend { position: absolute; margin-top: -1em; margin-left: 1em; background: white; height: 1em; }
|
||||
.inner { margin: 2em 1em 1em 1em; height: 1em; }
|
||||
.inner { margin: 3em 1em 1em 1em; height: 1em; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div class=fieldset>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
<style>
|
||||
body { margin: 0; }
|
||||
fieldset { margin: 1em; border: 1em solid green; padding: 0; background: white; }
|
||||
legend { margin: 1em; height: 1em; padding: 0; }
|
||||
legend { margin: 1em 1em 2em 1em; height: 1em; padding: 0; }
|
||||
.inner { margin: 1em; height: 1em; }
|
||||
.behind { position: absolute; left: 1em; right: 1em; margin-top: 1em; height: 6em; background: red; z-index: -1; }
|
||||
.behind { position: absolute; left: 1em; right: 1em; margin-top: 1em; height: 7em; background: red; z-index: -1; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div class=behind></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<title>Reference for rendered legend and CSS display rendering</title>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
div { width: 600px; box-sizing: border-box; background: #ddd; border: 1px solid; }
|
||||
.padding { padding-left: 5em; }
|
||||
.margin { margin-left: 5em; }
|
||||
.cell { display: inline-block; width: 50%; }
|
||||
.ruby { display: block; }
|
||||
</style>
|
||||
<div><span class=cell>table</span><span class=cell>table</span></div>
|
||||
<div class=padding>table-row-group</div>
|
||||
<div class=padding>table-header-group</div>
|
||||
<div class=padding>table-footer-group</div>
|
||||
<div class=padding>table-row</div>
|
||||
<div class=margin>table-cell</div>
|
||||
<div class=padding>table-column-group</div>
|
||||
<div class=padding>table-column</div>
|
||||
<div>table-caption</div>
|
||||
<div>flow</div>
|
||||
<div>flow-root</div>
|
||||
<div>run-in</div>
|
||||
<div>inline</div>
|
||||
<div>inline-block</div>
|
||||
<div><span class=cell>inline-table</span><span class=cell>inline-table</span></div>
|
||||
<div><span class=ruby>ruby</span><span class=ruby>ruby</span></div>
|
||||
<div>ruby-base</div>
|
||||
<div>ruby-text</div>
|
||||
<div>ruby-base-container</div>
|
||||
<div>ruby-text-container</div>
|
||||
<div><span class=cell>grid</span><span class=cell>grid</span></div>
|
||||
<div><span class=cell>inline-grid</span><span class=cell>inline-grid</span></div>
|
||||
<div><span class=cell>flex</span><span class=cell>flex</span></div>
|
||||
<div><span class=cell>inline-flex</span><span class=cell>inline-flex</span></div>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!doctype html>
|
||||
<title>rendered legend and CSS display rendering</title>
|
||||
<link rel=match href=legend-display-rendering-ref.html>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
fieldset { margin: 0; padding: 0; border: none; }
|
||||
legend { width: 600px; box-sizing: border-box; padding: 0; background: #ddd; border: 1px solid; }
|
||||
[style="display: table"] span,
|
||||
[style="display: inline-table"] span { display: table-cell; }
|
||||
[style="display: table-row-group"],
|
||||
[style="display: table-header-group"],
|
||||
[style="display: table-footer-group"],
|
||||
[style="display: table-row"],
|
||||
[style="display: table-column-group"],
|
||||
[style="display: table-column"] { padding-left: 5em; /* would be ignored if not blockified */ }
|
||||
[style="display: table-cell"] { margin-left: 5em; /* would be ignored if not blockified */ }
|
||||
.rb { display: ruby-base; }
|
||||
.rt { display: ruby-text; }
|
||||
[style="display: grid"],
|
||||
[style="display: inline-grid"] { grid-template-columns: auto auto; }
|
||||
[style="display: flex"] span,
|
||||
[style="display: inline-flex"] span { display: block; flex-grow: 1 }
|
||||
</style>
|
||||
<fieldset>
|
||||
<legend style="display: table"><span>table</span><span>table</span></legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-row-group">table-row-group</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-header-group">table-header-group</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-footer-group">table-footer-group</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-row">table-row</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-cell">table-cell</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-column-group">table-column-group</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-column">table-column</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: table-caption">table-caption</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: flow">flow</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: flow-root">flow-root</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: run-in">run-in</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: inline">inline</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: inline-block">inline-block</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: inline-table"><span>inline-table</span><span>inline-table</span></legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: ruby"><span class=rb>ruby</span><span class=rt>ruby</span></legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: ruby-base">ruby-base</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: ruby-text">ruby-text</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: ruby-base-container">ruby-base-container</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: ruby-text-container">ruby-text-container</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: grid"><span>grid</span><span>grid</span></legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: inline-grid"><span>inline-grid</span><span>inline-grid</span></legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: flex"><span>flex</span><span>flex</span></legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend style="display: inline-flex"><span>inline-flex</span><span>inline-flex</span></legend>
|
||||
</fieldset>
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!doctype html>
|
||||
<title>legend and dipslay: list-item</title>
|
||||
<link rel=match href=fieldset-list-item-ref.html>
|
||||
<link rel=match href=legend-list-item-ref.html>
|
||||
<style>
|
||||
fieldset { margin: 0; padding: 0; border: none; }
|
||||
legend { margin: 0 40px; padding: 0; display: list-item; }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<title>legend and margin (inline direction)</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<style>
|
||||
fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; }
|
||||
legend { height: 10px; width: 200px; padding: 0; }
|
||||
|
||||
#legend-center { margin-left: auto; margin-right: auto; }
|
||||
#legend-right { margin-left: auto; }
|
||||
#legend-10 { margin-left: 10px; }
|
||||
</style>
|
||||
<fieldset>
|
||||
<legend id=legend-left>left</legend>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id=legend-center>center</legend>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id=legend-right>right</legend>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id=legend-10>10px</legend>
|
||||
</fieldset>
|
||||
|
||||
<script>
|
||||
const legends = document.getElementsByTagName('legend');
|
||||
const [legendLeft, legendCenter, legendRight, legend10] = legends;
|
||||
|
||||
const expectedLeft = 8 + 10 + 20;
|
||||
const expectedCenter = expectedLeft + (500 / 2) - (200 / 2);
|
||||
const expectedRight = expectedLeft + 500 - 200;
|
||||
const expected10 = expectedLeft + 10;
|
||||
|
||||
test(() => {
|
||||
assert_equals(legendLeft.offsetLeft, expectedLeft);
|
||||
}, 'left');
|
||||
|
||||
test(() => {
|
||||
assert_equals(legendCenter.offsetLeft, expectedCenter);
|
||||
}, 'center');
|
||||
|
||||
test(() => {
|
||||
assert_equals(legendRight.offsetLeft, expectedRight);
|
||||
}, 'right');
|
||||
|
||||
test(() => {
|
||||
assert_equals(legend10.offsetLeft, expected10);
|
||||
}, '10px');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue