diff options
Diffstat (limited to 'testing/web-platform/tests/quirks-mode/unitless-length.html')
| -rw-r--r-- | testing/web-platform/tests/quirks-mode/unitless-length.html | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/testing/web-platform/tests/quirks-mode/unitless-length.html b/testing/web-platform/tests/quirks-mode/unitless-length.html new file mode 100644 index 000000000..b2f05c010 --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/unitless-length.html @@ -0,0 +1,226 @@ +<!doctype html> +<html> + <head> + <title>The unitless length quirk</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 id=quirks></iframe> + <iframe id=almost></iframe> + <iframe id=standards></iframe> + <script> + setup({explicit_done:true}); + onload = function() { + var html = "<style id=style></style><div id=test></div><div id=ref></div>"; + var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'; + var s_doctype = '<!DOCTYPE HTML>'; + var q = document.getElementById('quirks').contentWindow; + var a = document.getElementById('almost').contentWindow; + var s = document.getElementById('standards').contentWindow; + q.document.open(); + q.document.write(html); + q.document.close(); + a.document.open(); + a.document.write(a_doctype + html); + a.document.close(); + s.document.open(); + s.document.write(s_doctype + html); + s.document.close(); + [q, a, s].forEach(function(win) { + ['style', 'test', 'ref'].forEach(function(id) { + win[id] = win.document.getElementById(id); + }); + }); + + 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) { + var test_q = async_test(t.input + ' (quirks)'); + var test_a = async_test(t.input + ' (almost standards)'); + var test_s = async_test(t.input + ' (standards)'); + for (var i in props) { + if (t.shorthand && !(props[i].check_also)) { + continue; + } + test_q.step(function() { + q.style.textContent = style_template.replace('{test}', t.input) + .replace('{ref}', t.q).replace(/\{prop\}/g, props[i].prop) + .replace(/clip:[^;]+/g, function(match) { + return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')'; + }); + assert_equals(q.getComputedStyle(q.test).getPropertyValue(props[i].check), + q.getComputedStyle(q.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(q.getComputedStyle(q.test).getPropertyValue(props[i].check_also[j]), + q.getComputedStyle(q.ref).getPropertyValue(props[i].check_also[j]), + props[i].prop + ', checking ' + props[i].check_also[j]); + } + } + }); + test_a.step(function() { + a.style.textContent = style_template.replace('{test}', t.input) + .replace('{ref}', t.s).replace(/\{prop\}/g, props[i].prop) + .replace(/clip:[^;]+/g, function(match) { + return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')'; + }); + assert_equals(a.getComputedStyle(a.test).getPropertyValue(props[i].check), + a.getComputedStyle(a.ref).getPropertyValue(props[i].check), + props[i].prop + ' in almost standards mode'); + if (t.shorthand && props[i].check_also) { + for (var j in props[i].check_also) { + assert_equals(a.getComputedStyle(a.test).getPropertyValue(props[i].check_also[j]), + a.getComputedStyle(a.ref).getPropertyValue(props[i].check_also[j]), + props[i].prop + ', checking ' + props[i].check_also[j]); + } + } + }); + test_s.step(function() { + s.style.textContent = style_template.replace('{test}', t.input) + .replace('{ref}', t.s).replace(/\{prop\}/g, props[i].prop) + .replace(/clip:[^;]+/g, function(match) { + return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')'; + }); + assert_equals(s.getComputedStyle(s.test).getPropertyValue(props[i].check), + s.getComputedStyle(s.ref).getPropertyValue(props[i].check), + props[i].prop + ' in standards mode'); + if (t.shorthand && props[i].check_also) { + for (var j in props[i].check_also) { + assert_equals(s.getComputedStyle(s.test).getPropertyValue(props[i].check_also[j]), + s.getComputedStyle(s.ref).getPropertyValue(props[i].check_also[j]), + props[i].prop + ', checking ' + props[i].check_also[j]); + } + } + }); + } + test_q.done(); + test_a.done(); + test_s.done(); + + }); + + 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() { + q.style.textContent = other_template.replace('{test}', t.input); + assert_equals(q.getComputedStyle(q.test).getPropertyValue(t.prop), + q.getComputedStyle(q.ref).getPropertyValue(t.prop), + 'quirk was supported'); + }, 'Excluded property '+t.input); + }); + + done(); + } + </script> + </body> +</html> |