mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision 8f8ff0e2a61f2a24996404921fe853cb1fd9b432
This commit is contained in:
parent
e98cd07910
commit
141a52794b
58 changed files with 1615 additions and 276 deletions
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>fieldset percentage padding</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.outer { width: 500px; position: relative; }
|
||||
fieldset { width: 100px; padding: 10%; margin: 0; border: none; }
|
||||
.overflow { overflow: auto; }
|
||||
</style>
|
||||
<div class=outer>
|
||||
<fieldset>
|
||||
<div id=no-overflow>x</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class=outer>
|
||||
<fieldset class=overflow>
|
||||
<div id=with-overflow>x</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<script>
|
||||
const noOverflow = document.getElementById('no-overflow');
|
||||
const withOverflow = document.getElementById('with-overflow');
|
||||
for (const div of [noOverflow, withOverflow]) {
|
||||
test(() => {
|
||||
assert_equals(div.offsetLeft, 50, "offsetLeft");
|
||||
assert_equals(div.clientWidth, 100, "clientWidth");
|
||||
assert_equals(div.offsetTop, 50, "offsetTop");
|
||||
}, div.id);
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<title>legend align to justify-self</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<fieldset><legend>x</legend></fieldset>
|
||||
<fieldset><legend align=left>x</legend></fieldset>
|
||||
<fieldset><legend align=center>x</legend></fieldset>
|
||||
<fieldset><legend align=right>x</legend></fieldset>
|
||||
<fieldset><legend align=lEfT>x</legend></fieldset>
|
||||
<fieldset><legend align=cEnTeR>x</legend></fieldset>
|
||||
<fieldset><legend align=rIgHt>x</legend></fieldset>
|
||||
<!-- invalid values -->
|
||||
<fieldset><legend align=justify>x</legend></fieldset>
|
||||
<fieldset><legend align="left ">x</legend></fieldset>
|
||||
<!-- dir -->
|
||||
<fieldset><legend dir=ltr>x</legend></fieldset>
|
||||
<fieldset><legend dir=rtl>x</legend></fieldset>
|
||||
<fieldset dir=rtl><legend dir=ltr>x</legend></fieldset>
|
||||
<fieldset dir=rtl><legend dir=rtl>x</legend></fieldset>
|
||||
<script>
|
||||
for (const fieldset of document.querySelectorAll('fieldset')) {
|
||||
test(() => {
|
||||
const legend = fieldset.firstChild;
|
||||
const align = legend.align.toLowerCase();
|
||||
let expected = 'auto';
|
||||
switch (align) {
|
||||
case 'left': expected = 'left'; break;
|
||||
case 'center': expected = 'center'; break;
|
||||
case 'right': expected = 'right'; break;
|
||||
}
|
||||
assert_equals(getComputedStyle(legend).justifySelf, expected);
|
||||
}, `${fieldset.outerHTML}`)
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<title>Reference for legend block margins</title>
|
||||
<style>
|
||||
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; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div class=fieldset>
|
||||
<div class=legend>X</div>
|
||||
<div class=inner>Y</div>
|
||||
</div>
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<title>legend block margins</title>
|
||||
<link rel=match href=legend-block-margins-ref.html>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
fieldset { margin: 1em; border: 1em solid green; padding: 0; background: white; }
|
||||
legend { margin: 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; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div class=behind></div>
|
||||
<fieldset>
|
||||
<legend>X</legend>
|
||||
<div class=inner>Y</div>
|
||||
</fieldset>
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for tall legend</title>
|
||||
<style>
|
||||
body, p { margin: 0; }
|
||||
.legend { position: absolute; height: 160px; margin-left: 20px; inline-size: fit-content; background: lime }
|
||||
.fieldset {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2));
|
||||
background: green;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.hello { margin-top: 160px; margin-left: 20px; }
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div class=legend>X</div>
|
||||
<div class=fieldset></div>
|
||||
<div class=hello>HELLO</div>
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>tall legend</title>
|
||||
<link rel=match href=legend-tall-ref.html>
|
||||
<style>
|
||||
body, p { margin: 0; }
|
||||
fieldset { height: 30px; margin: 0; border: 20px solid green; padding: 0px; background: red; }
|
||||
legend { height: 160px; background: lime; padding: 0; }
|
||||
#behind {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2));
|
||||
background: red;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
<p>There should be no red.</p>
|
||||
<div id=behind></div>
|
||||
<fieldset><legend>X</legend>HELLO</fieldset>
|
Loading…
Add table
Add a link
Reference in a new issue