Update web-platform-tests to revision 84af6c875d378944b39d895acdcfc170736b2d3d

This commit is contained in:
WPT Sync Bot 2019-07-10 10:26:06 +00:00
parent d0bd2d5e44
commit b81cdc75ce
246 changed files with 10836 additions and 1337 deletions

View file

@ -0,0 +1,180 @@
<!doctype html>
<meta charset=utf-8>
<title>Test handling of attributes that map to dimension properties</title>
<link rel="help"
href="https://html.spec.whatwg.org/multipage/rendering.html#maps-to-the-dimension-property">
<link rel="help"
href="https://html.spec.whatwg.org/multipage/rendering.html#maps-to-the-dimension-property-(ignoring-zero)">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<body>
<!-- We need a place to put our elements so they're bound to a document and
have computed style, but we don't want percentages resolved to lengths,
so need to make sure they have no CSS boxes -->
<div id="container" style="display: none"></div>
<script>
/*
* This test tests
*
* https://html.spec.whatwg.org/multipage/rendering.html#maps-to-the-dimension-property
* and
* https://html.spec.whatwg.org/multipage/rendering.html#maps-to-the-dimension-property-(ignoring-zero)
* for various elements and various values.
*/
/*
* Array of input/output pairs. The input is the string to use as the
* attribute value. The output is the string expected as the computed style
* for the relevant CSS property.
*/
const valid_values = [
// Valid values
[ "200", "200px" ],
[ "1007", "1007px" ],
[ " 00523 ", "523px" ],
[ "200.25", "200.25px" ],
[ "200.", "200px" ],
[ "+200", "200px" ],
[ "200in", "200px" ],
[ "200.25in", "200.25px" ],
[ " +200in ", "200px" ],
[ " +200.25in ", "200.25px" ],
[ "200 %", "200px" ],
[ "200 abc", "200px" ],
[ "200%", "200%" ],
[ "200%abc", "200%" ],
[ "+200%", "200%" ],
[ "200.25%", "200.25%" ],
// https://github.com/whatwg/html/issues/4736 tracks the fact that "200.%"
// should probably be mapped as "200%", not "200px".
[ "200.%", "200px" ],
[ " +200.25% ", "200.25%" ],
[ " +200.25%abc", "200.25%" ],
];
/*
* Values that are only valid for the not-ignoring-zero case.
*/
const zero_values = [
[ "0", "0px" ],
[ "+0", "0px" ],
[ "0%", "0%" ],
[ "+0%", "0%" ],
[ "0px", "0px" ],
];
/*
* Array of invalid values. These should lead to the default value of the
* relevant CSS property.
*/
const invalid_values = [
"-0",
"-0%",
"-200",
"-200px",
" -200",
"+-200",
"-+200",
"-200%"
];
const valid_values_with_0 =
valid_values.concat(zero_values);
const invalid_values_with_0 =
invalid_values.concat(zero_values.map((v) => v[0]));
function newElem(name) {
return () => document.createElement(name);
}
function newImageInput() {
return () => {
var elem = newElem("input")();
elem.type = "image";
return elem;
}
}
/*
* Array of tests. Each test consists of the following information:
*
* 1) An element creation function.
* 2) The name of the attribute to set (and CSS property to get).
* 3) A boolean indicating whether 0 is a valid value for the dimension
* attribute.
*/
const tests = [
[ newElem("hr"), "width", true ],
[ newElem("iframe"), "width", true ],
[ newElem("iframe"), "height", true ],
[ newImageInput(), "width", true ],
[ newImageInput(), "height", true ],
[ newElem("marquee"), "width", true ],
[ newElem("marquee"), "height", true ],
[ newElem("video"), "width", true ],
[ newElem("video"), "height", true ],
[ newElem("object"), "width", true ],
[ newElem("object"), "height", true ],
[ newElem("embed"), "width", true ],
[ newElem("embed"), "height", true ],
[ newElem("img"), "width", true ],
[ newElem("img"), "height", true ],
[ newElem("td"), "width", false ],
[ newElem("td"), "height", false ],
// https://github.com/whatwg/html/issues/4715 tracks the fact that for
// <table width> and <table height> the "0 is valid" boolean should probably
// be true.
[ newElem("table"), "width", false ],
[ newElem("table"), "height", false ],
// https://github.com/whatwg/html/issues/4716 tracks the fact that for the
// <tr height> case that "0 is valid" boolean should probably be true.
[ newElem("tr"), "height", false ],
// https://github.com/whatwg/html/issues/4717 tracks the fact that for the
// <col width> case that "0 is valid" boolean should probably be true.
[ newElem("col"), "width", false ],
];
function style(element) {
return element.ownerDocument.defaultView.getComputedStyle(element);
}
const container = document.getElementById("container");
for (let [ctor, attr, zero_allowed] of tests) {
let valid, invalid;
if (zero_allowed) {
valid = valid_values_with_0;
invalid = invalid_values;
} else {
valid = valid_values;
invalid = invalid_values_with_0;
}
for (let [value, result] of valid) {
let elem = ctor();
test(function() {
this.add_cleanup(() => elem.remove());
elem.setAttribute(attr, value);
assert_equals(elem.getAttribute(attr), value);
container.appendChild(elem);
assert_equals(style(elem)[attr], result);
}, `<${elem.localName} ${attr}="${value}"> mapping`);
}
let default_elem = ctor();
container.appendChild(default_elem);
let defaultVal = style(default_elem)[attr];
default_elem.remove();
for (let value of invalid) {
let elem = ctor();
test(function() {
this.add_cleanup(() => elem.remove());
elem.setAttribute(attr, value);
assert_equals(elem.getAttribute(attr), value);
container.appendChild(elem);
assert_equals(style(elem)[attr], defaultVal);
}, `<${elem.localName} ${attr}="${value}"> mapping`);
}
}
</script>
</body>

View file

@ -0,0 +1,126 @@
<!doctype html>
<meta charset=utf-8>
<title>Test handling of attributes that map to pixel length properties</title>
<link rel="help"
href="https://html.spec.whatwg.org/multipage/rendering.html#maps-to-the-pixel-length-property">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<body>
<script>
/*
* This test tests
* https://html.spec.whatwg.org/multipage/rendering.html#maps-to-the-pixel-length-property
* for various elements and various values.
*/
/*
* Array of input/output pairs. The input is the string to use as the
* attribute value. The output is the string expected as the computed style
* for the relevant CSS property.
*/
const valid_values = [
[ "200", "200px" ],
[ "1007", "1007px" ],
[ " 00523 ", "523px" ],
[ "200.", "200px" ],
[ "200.25", "200px" ],
[ "200.7", "200px" ],
[ "0", "0px" ],
[ "-0", "0px" ],
[ "+0", "0px" ],
[ "+200", "200px" ],
[ "200in", "200px" ],
[ "200.25in", "200px" ],
[ " +200in ", "200px" ],
[ "200%", "200px" ],
[ "200.%", "200px" ],
[ "200.25%", "200px" ],
];
/*
* Array of invalid values. These should lead to the default value of the
* relevant CSS property.
*/
const invalid_values = [
"-200",
"-200px",
" -200",
"+-200",
"-+200",
];
/*
* Array of tests. Each test consists of the following information:
*
* 1) A function to call to create the element to test. This returns a
* 3-element array: The element to set the attribute on, the element to
* compute style on, and a cleanup function to call when done.
* 2) The name of the attribute to set.
* 3) The name of the computed style property to get.
* 4) An element that can be used to determine the fallback style value for
* invalid values.
*/
const tests = [
[ createIframe, "marginwidth", "marginLeft", document.body ],
[ createIframe, "marginwidth", "marginRight", document.body ],
[ createIframe, "marginheight", "marginTop", document.body ],
[ createIframe, "marginheight", "marginBottom", document.body ],
[ createFrame, "marginwidth", "marginLeft", document.body ],
[ createFrame, "marginwidth", "marginRight", document.body ],
[ createFrame, "marginheight", "marginTop", document.body ],
[ createFrame, "marginheight", "marginBottom", document.body ],
];
function createIframe() {
let ifr = document.createElement("iframe");
document.body.appendChild(ifr);
return [ ifr, ifr.contentDocument.body, () => ifr.remove() ];
}
function createFrame() {
// We need to create a separate iframe to put our frameset into.
let ifr = document.createElement("iframe");
document.body.appendChild(ifr);
let doc = ifr.contentDocument;
let root = doc.documentElement;
while (root.firstChild) {
root.firstChild.remove();
}
let frameset = doc.createElement("frameset");
frameset.setAttribute("rows", "*");
frameset.setAttribute("cols", "*");
let frame = doc.createElement("frame");
frameset.appendChild(frame);
root.appendChild(frameset);
return [ frame, frame.contentDocument.body, () => ifr.remove() ];
}
function style(element) {
return element.ownerDocument.defaultView.getComputedStyle(element);
}
for (let [setup, attr, prop, default_elem] of tests) {
for (let [value, result] of valid_values) {
let [ attr_elem, prop_elem, cleanup ] = setup();
test(function() {
this.add_cleanup(cleanup);
attr_elem.setAttribute(attr, value);
assert_equals(attr_elem.getAttribute(attr), value);
assert_equals(style(prop_elem)[prop], result);
}, `<${attr_elem.localName} ${attr}="${value}"> mapping to ${prop}`);
}
let defaultVal = style(default_elem)[prop];
for (let value of invalid_values) {
let [ attr_elem, prop_elem, cleanup ] = setup();
test(function() {
this.add_cleanup(cleanup);
attr_elem.setAttribute(attr, value);
assert_equals(attr_elem.getAttribute(attr), value);
assert_equals(style(prop_elem)[prop], defaultVal);
}, `<${attr_elem.localName} ${attr}="${value}"> mapping to ${prop}`);
}
}
</script>
</body>

View file

@ -0,0 +1,27 @@
<!doctype html>
<title>Image width and height attributes are used to infer aspect-ratio</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
img {
width: 100%;
max-width: 100px;
height: auto;
}
</style>
<img src=broken width=100 height=125>
<img src="/images/green.png" width=100 height=125>
<img src="/images/green.png">
<script>
let t = async_test("Image width and height attributes are used to infer aspect-ratio");
function assert_ratio(img, expected) {
let epsilon = 0.001;
assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
}
onload = t.step_func_done(function() {
let images = document.querySelectorAll("img");
assert_ratio(images[0], 0.8);
assert_ratio(images[1], 0.8);
assert_ratio(images[2], 2.0); // 2.0 is the original aspect ratio of green.png
});
</script>