diff options
Diffstat (limited to 'testing/web-platform/tests/quirks/unitless-length')
7 files changed, 368 insertions, 0 deletions
diff --git a/testing/web-platform/tests/quirks/unitless-length/excluded-properties-001.html b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-001.html new file mode 100644 index 0000000000..09fedcf601 --- /dev/null +++ b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-001.html @@ -0,0 +1,85 @@ +<html> +<head> +<meta charset="utf-8"> +<title>Many properties do not support quirky-length</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://quirks.spec.whatwg.org/#the-unitless-length-quirk"> +<meta name="assert" content="quirky-length is not supported by properties not listed."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; + +var properties = [ + 'background-position-x', + 'background-position-y', + 'block-size', + 'border-bottom-left-radius', + 'border-bottom-right-radius', + 'border-top-left-radius', + 'border-top-right-radius', + 'column-gap', + 'column-rule-width', + 'column-width', + 'flex-basis', + 'grid-auto-columns', + 'grid-auto-rows', + 'grid-template-columns', + 'grid-template-rows', + 'inline-size', + 'inset', + 'inset-block', + 'inset-block-end', + 'inset-block-start', + 'inset-inline', + 'inset-inline-end', + 'inset-inline-start', + 'margin-block-end', + 'margin-block-start', + 'margin-inline-end', + 'margin-inline-start', + 'min-block-size', + 'min-inline-size', + 'offset-distance', + 'outline-offset', + 'outline-width', + 'padding-block-end', + 'padding-block-start', + 'padding-inline-end', + 'padding-inline-start', + 'perspective', + 'row-gap', + 'scroll-margin-block-end', + 'scroll-margin-block-start', + 'scroll-margin-bottom', + 'scroll-margin-inline-end', + 'scroll-margin-inline-start', + 'scroll-margin-left', + 'scroll-margin-right', + 'scroll-margin-top', + 'scroll-padding-block-end', + 'scroll-padding-block-start', + 'scroll-padding-bottom', + 'scroll-padding-inline-end', + 'scroll-padding-inline-start', + 'scroll-padding-left', + 'scroll-padding-right', + 'scroll-padding-top', + 'shape-margin' +]; + +for (let property of properties) { + test(() => { + if (!getComputedStyle(target)[property]) + return; + target.style[property] = '567px'; + target.style[property] = '1234'; + assert_equals(target.style[property], '567px'); + }, 'Property ' + property + ' does not support quirky length'); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/quirks/unitless-length/excluded-properties-002.html b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-002.html new file mode 100644 index 0000000000..b8b3b2e5c5 --- /dev/null +++ b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-002.html @@ -0,0 +1,43 @@ +<html> +<head> +<meta charset="utf-8"> +<title>Many properties do not support quirky-length</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://quirks.spec.whatwg.org/#the-unitless-length-quirk"> +<meta name="assert" content="quirky-length is not supported by properties not listed."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; + +var properties = [ + 'background-blend-mode', + 'background-size', + 'box-shadow', + 'clip-path', + 'column-span', + 'filter', + 'mask', + 'object-position', + 'perspective-origin', + 'text-shadow', + 'transform-origin' +]; + +for (let property of properties) { + test(() => { + if (!getComputedStyle(target)[property]) { + assert_unreached('Property ' + property + ' not supported'); + } + target.style[property] = '1234'; + assert_not_equals(target.style[property], '1234'); + assert_not_equals(target.style[property], '1234px'); + assert_not_equals(target.style[property], '1234px auto'); + }, 'Property ' + property + ' does not support quirky length'); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/quirks/unitless-length/excluded-properties-003.html b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-003.html new file mode 100644 index 0000000000..4cbe012a55 --- /dev/null +++ b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-003.html @@ -0,0 +1,42 @@ +<html> +<head> +<meta charset="utf-8"> +<title>inset does not support quirky-length</title> +<link rel="help" href="https://quirks.spec.whatwg.org/#the-unitless-length-quirk"> +<meta name="assert" content="quirky-length is not supported by inset."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; + +test(() => { + const quirky_values = [ + '1', + '1 2px', + '1px 2', + '1 2', + '1 2px 3px', + '1px 2 3px', + '1px 2px 3', + '1 2 3', + '1 2px 3px 4px', + '1px 2 3px 4px', + '1px 2px 3 4px', + '1px 2px 3px 4', + '1 2 3 4' + ]; + + target.style['inset'] = '5px 6px 7px 8px'; + + for (let value of quirky_values) { + target.style['inset'] = value; + assert_equals(target.style['inset'], '5px 6px 7px 8px', 'inset rejects quirky length "' + value + '"'); + } +}, 'inset does not support quirky length values'); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/quirks/unitless-length/limited-quirks.html b/testing/web-platform/tests/quirks/unitless-length/limited-quirks.html new file mode 100644 index 0000000000..fab0b3b805 --- /dev/null +++ b/testing/web-platform/tests/quirks/unitless-length/limited-quirks.html @@ -0,0 +1,15 @@ +<!doctype html> +<html> + <head> + <title>The unitless length quirk (limited-quirks)</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:20px; height:20px; } </style> + </head> + <body> + <div id=log></div> + <iframe class=limited-quirks></iframe> + <script src=../support/test-ref-iframe.js></script> + <script src=support/common.js></script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks/unitless-length/no-quirks.html b/testing/web-platform/tests/quirks/unitless-length/no-quirks.html new file mode 100644 index 0000000000..82036f9a61 --- /dev/null +++ b/testing/web-platform/tests/quirks/unitless-length/no-quirks.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> + <head> + <title>The unitless length quirk (no-quirks)</title> + <meta name="timeout" content="long"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:20px; height:20px; } </style> + </head> + <body> + <div id=log></div> + <iframe class=no-quirks></iframe> + <script src=../support/test-ref-iframe.js></script> + <script src=support/common.js></script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks/unitless-length/quirks.html b/testing/web-platform/tests/quirks/unitless-length/quirks.html new file mode 100644 index 0000000000..80bda7a392 --- /dev/null +++ b/testing/web-platform/tests/quirks/unitless-length/quirks.html @@ -0,0 +1,15 @@ +<!doctype html> +<html> + <head> + <title>The unitless length quirk (quirks)</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:20px; height:20px; } </style> + </head> + <body> + <div id=log></div> + <iframe class=quirks></iframe> + <script src=../support/test-ref-iframe.js></script> + <script src=support/common.js></script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks/unitless-length/support/common.js b/testing/web-platform/tests/quirks/unitless-length/support/common.js new file mode 100644 index 0000000000..f2f7eab4e3 --- /dev/null +++ b/testing/web-platform/tests/quirks/unitless-length/support/common.js @@ -0,0 +1,152 @@ +setup({explicit_done:true}); +onload = function() { + setupIframe(); + + var tests = [ + {input:"1", q:"1px"}, + {input:"+1", q:"1px"}, + {input:"-1", q:"-1px"}, + {input:"1.5", q:"1.5px"}, + {input:"+1.5", q:"1.5px"}, + {input:"-1.5", q:"-1.5px"}, + {input:"\\31 "}, + {input:"+\\31 "}, + {input:"-\\31 "}, + {input:"\\31 .5"}, + {input:"+\\31 .5"}, + {input:"-\\31 .5"}, + {input:"1\\31 "}, + {input:"+1\\31 "}, + {input:"-1\\31 "}, + {input:"1\\31 .5"}, + {input:"+1\\31 .5"}, + {input:"-1\\31 .5"}, + {input:"a"}, + {input:"A"}, + {input:"1a"}, + {input:"+1a"}, + {input:"-1a"}, + {input:"+1A"}, + {input:"-1A"}, + {input:"+a"}, + {input:"-a"}, + {input:"+A"}, + {input:"-A"}, + {input:"@a"}, + {input:"@1"}, + {input:"@1a"}, + {input:'"a"'}, + {input:'"1"'}, + {input:'"1a"'}, + {input:"url(1)"}, + {input:"url('1')"}, + {input:"#1"}, + {input:"#01"}, + {input:"#001"}, + {input:"#0001"}, + {input:"#00001"}, + {input:"#000001"}, + {input:"+/**/1"}, + {input:"-/**/1"}, + {input:"calc(1)"}, + {input:"calc(2 * 2px)", q:"4px", s:"4px"}, + {input:"1px 2", q:"1px 2px", shorthand:true}, + {input:"1 2px", q:"1px 2px", shorthand:true}, + {input:"1px calc(2)", shorthand:true}, + {input:"calc(1) 2px", shorthand:true}, + {input:"1 +2", q:"1px 2px", shorthand:true}, + {input:"1 -2", q:"1px -2px", shorthand:true}, + ]; + + var props = [ + {prop:'background-position', check:'background-position', check_also:[]}, + {prop:'border-spacing', check:'border-spacing', check_also:[]}, + {prop:'border-top-width', check:'border-top-width'}, + {prop:'border-right-width', check:'border-right-width'}, + {prop:'border-bottom-width', check:'border-bottom-width'}, + {prop:'border-left-width', check:'border-left-width'}, + {prop:'border-width', check:'border-top-width', check_also:['border-right-width', 'border-bottom-width', 'border-left-width']}, + {prop:'bottom', check:'bottom'}, + {prop:'clip', check:'clip'}, + {prop:'font-size', check:'font-size'}, + {prop:'height', check:'height'}, + {prop:'left', check:'left'}, + {prop:'letter-spacing', check:'letter-spacing'}, + {prop:'margin-right', check:'margin-right'}, + {prop:'margin-left', check:'margin-left'}, + {prop:'margin-top', check:'margin-top'}, + {prop:'margin-bottom', check:'margin-bottom'}, + {prop:'margin', check:'margin-top', check_also:['margin-right', 'margin-bottom', 'margin-left']}, + {prop:'max-height', check:'max-height'}, + {prop:'max-width', check:'max-width'}, + {prop:'min-height', check:'min-height'}, + {prop:'min-width', check:'min-width'}, + {prop:'padding-top', check:'padding-top'}, + {prop:'padding-right', check:'padding-right'}, + {prop:'padding-bottom', check:'padding-bottom'}, + {prop:'padding-left', check:'padding-left'}, + {prop:'padding', check:'padding-top', check_also:['padding-right', 'padding-bottom', 'padding-left']}, + {prop:'right', check:'right'}, + {prop:'text-indent', check:'text-indent'}, + {prop:'top', check:'top'}, + {prop:'vertical-align', check:'vertical-align'}, + {prop:'width', check:'width'}, + {prop:'word-spacing', check:'word-spacing'}, + ]; + var style_template = '#test{border-style:solid;position:relative;{prop}:{test};}' + + '#ref{border-style:solid;position:relative;{prop}:{ref};}'; + + tests.forEach(function(t) { + for (var i in props) { + if (t.shorthand && !(props[i].check_also)) { + continue; + } + test(function() { + win.style.textContent = style_template.replace('{test}', t.input) + .replace('{ref}', quirks ? t.q : t.s).replace(/\{prop\}/g, props[i].prop) + .replace(/clip:[^;]+/g, function(match) { + return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')'; + }); + assert_equals(win.getComputedStyle(win.test).getPropertyValue(props[i].check), + win.getComputedStyle(win.ref).getPropertyValue(props[i].check), + props[i].prop); + if (t.shorthand && props[i].check_also) { + for (var j in props[i].check_also) { + assert_equals(win.getComputedStyle(win.test).getPropertyValue(props[i].check_also[j]), + win.getComputedStyle(win.ref).getPropertyValue(props[i].check_also[j]), + props[i].prop + ', checking ' + props[i].check_also[j]); + } + } + }, props[i].prop + ": " + t.input); + + } + }); + + if (quirks) { + var other_tests = [ + {input:'background:1 1', prop:'background-position'}, + {input:'border-top:red solid 1', prop:'border-top-width'}, + {input:'border-right:red solid 1', prop:'border-right-width'}, + {input:'border-bottom:red solid 1', prop:'border-bottom-width'}, + {input:'border-left:red solid 1', prop:'border-left-width'}, + {input:'border:red solid 1', prop:'border-top-width'}, + {input:'font:normal normal normal 40 sans-serif', prop:'font-size'}, + {input:'outline:red solid 1', prop:'outline-width'}, + {input:'outline-width:1', prop:'outline-width'}, + ]; + + var other_template = "#test{position:relative;outline-style:solid;{test}}" + + "#ref{outline-style:solid}"; + + other_tests.forEach(function(t) { + test(function() { + win.style.textContent = other_template.replace('{test}', t.input); + assert_equals(win.getComputedStyle(win.test).getPropertyValue(t.prop), + win.getComputedStyle(win.ref).getPropertyValue(t.prop), + 'quirk was supported'); + }, 'Excluded property '+t.input); + }); + } + + done(); +} |