Update web-platform-tests to revision 8f8ff0e2a61f2a24996404921fe853cb1fd9b432

This commit is contained in:
WPT Sync Bot 2018-09-17 21:32:16 -04:00
parent e98cd07910
commit 141a52794b
58 changed files with 1615 additions and 276 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>