| <!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.7", "200.7px" ], |
| [ "200.", "200px" ], |
| [ "200in", "200px" ], |
| [ "200.25in", "200.25px" ], |
| [ "200 %", "200px" ], |
| [ "200 abc", "200px" ], |
| [ "200%", "200%" ], |
| [ "200%abc", "200%" ], |
| [ "200.25%", "200.25%" ], |
| [ "200.%", "200%" ], |
| [ "20.25e2", "20.25px" ], |
| [ "20.25E2", "20.25px" ], |
| ]; |
| |
| /* |
| * Values that are only valid for the not-ignoring-zero case. |
| */ |
| const zero_values = [ |
| [ "0", "0px" ], |
| [ "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%", |
| "+200", |
| " +200in ", |
| " +200.25in ", |
| "+200%", |
| " +200.25% ", |
| " +200.25%abc", |
| "+0", |
| "+0%", |
| ".", |
| ".%", |
| ".x", |
| ".5", |
| ".5%" |
| ]; |
| |
| 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 |
| * 3) The name of the CSS property to get. |
| * 4) A boolean indicating whether 0 is a valid value for the dimension |
| * attribute. |
| */ |
| const tests = [ |
| [ newElem("hr"), "width", "width", true ], |
| [ newElem("iframe"), "width", "width", true ], |
| [ newElem("iframe"), "height", "height", true ], |
| [ newImageInput(), "width", "width", true ], |
| [ newImageInput(), "height", "height", true ], |
| [ newElem("marquee"), "width", "width", true ], |
| [ newElem("marquee"), "height", "height", true ], |
| [ newElem("video"), "width", "width", true ], |
| [ newElem("video"), "height", "height", true ], |
| [ newElem("object"), "width", "width", true ], |
| [ newElem("object"), "height", "height", true ], |
| [ newElem("embed"), "width", "width", true ], |
| [ newElem("embed"), "height", "height", true ], |
| [ newElem("img"), "width", "width", true ], |
| [ newElem("img"), "height", "height", true ], |
| [ newElem("td"), "width", "width", false ], |
| [ newElem("td"), "height", "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", "width", false ], |
| [ newElem("table"), "height", "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", "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", "width", false ], |
| [ newElem("embed"), "hspace", "marginLeft", true ], |
| [ newElem("embed"), "hspace", "marginRight", true ], |
| [ newElem("embed"), "vspace", "marginTop", true ], |
| [ newElem("embed"), "vspace", "marginBottom", true ], |
| [ newElem("img"), "hspace", "marginLeft", true ], |
| [ newElem("img"), "hspace", "marginRight", true ], |
| [ newElem("img"), "vspace", "marginTop", true ], |
| [ newElem("img"), "vspace", "marginBottom", true ], |
| [ newElem("object"), "hspace", "marginLeft", true ], |
| [ newElem("object"), "hspace", "marginRight", true ], |
| [ newElem("object"), "vspace", "marginTop", true ], |
| [ newElem("object"), "vspace", "marginBottom", true ], |
| [ newImageInput(), "hspace", "marginLeft", true ], |
| [ newImageInput(), "hspace", "marginRight", true ], |
| [ newImageInput(), "vspace", "marginTop", true ], |
| [ newImageInput(), "vspace", "marginBottom", true ], |
| [ newElem("marquee"), "hspace", "marginLeft", true ], |
| [ newElem("marquee"), "hspace", "marginRight", true ], |
| [ newElem("marquee"), "vspace", "marginTop", true ], |
| [ newElem("marquee"), "vspace", "marginBottom", true ], |
| ]; |
| |
| |
| function style(element) { |
| return element.ownerDocument.defaultView.getComputedStyle(element); |
| } |
| |
| const container = document.getElementById("container"); |
| |
| for (let [ctor, attr, prop, 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)[prop], result); |
| }, `<${elem.localName} ${attr}="${value}"> mapping to ${prop}`); |
| } |
| |
| let default_elem = ctor(); |
| container.appendChild(default_elem); |
| let defaultVal = style(default_elem)[prop]; |
| 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)[prop], defaultVal); |
| }, `<${elem.localName} ${attr}="${value}"> mapping to ${prop}`); |
| } |
| } |
| </script> |
| </body> |
