diff options
Diffstat (limited to 'testing/web-platform/tests/quirks-mode')
12 files changed, 1565 insertions, 0 deletions
diff --git a/testing/web-platform/tests/quirks-mode/OWNERS b/testing/web-platform/tests/quirks-mode/OWNERS new file mode 100644 index 000000000..638516146 --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/OWNERS @@ -0,0 +1 @@ +@zcorpan diff --git a/testing/web-platform/tests/quirks-mode/active-and-hover-manual.html b/testing/web-platform/tests/quirks-mode/active-and-hover-manual.html new file mode 100644 index 000000000..f334d88fb --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/active-and-hover-manual.html @@ -0,0 +1,182 @@ +<!doctype html> +<html> + <head> + <title>The :active and :hover quirk</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:100%; height:200px; } </style> + </head> + <body> + <p>Click on the boxes below (using a pointing device). <button onclick="timeout()">Abort and show results</button></p> + <div id=log></div> + <p>quirks: + <iframe id=quirks></iframe> + <p>almost: + <iframe id=almost></iframe> + <p>standards: + <iframe id=standards></iframe> + <script type="text/plain" id=html_tmpl> +<html id=html class=x lang=en> +<style> +.t:not(area), img { display:inline-block; vertical-align:middle; width:50px; height:50px; background-color:#eee; margin:0 0.5em } +.done.done { background-color:lime } +link::before { content:'' } +table, tbody, tr, td { display:inline } +</style> +<style>{style}</style> +<body id=body class=x> +a<a href=# id=a class=t></a> +b<a id=b class=t></a> +c<map id=map1 name=map1 class=x><area href=# coords=0,0,50,50 id=c class=t></map><img id=img1 class=x usemap=#map1 src=/images/transparent.png> +d<map id=map2 name=map2 class=x><area coords=0,0,50,50 id=d class=t></map><img id=img2 class=x usemap=#map2 src=/images/transparent.png> +e<link href=# id=e class=t> +f<link rel=stylesheet href=# id=f class=t> +g<link id=g class=t> +h<button id=h class=t></button> +i<input type=submit id=i class=t value> +j<input type=image id=j class=t alt> +k<input type=reset id=k class=t value> +l<input type=button id=l class=t value> +m<menuitem id=m class=t></menuitem> +n<img tabindex=0 id=n class=t src=/images/transparent.png> +o<a href=# id=a_ancestor class=x><table id=table class=x><tbody id=tbody class=x><tr id=tr class=x><td id=td class=x><a href=# id=o class=t></a></table></a> +</script> + <script> + setup({explicit_done:true, explicit_timeout:true}); + onload = function() { + + var links_only = [ + {input:':active', prop:'background-attachment', value:'fixed'}, + {input:':hover', prop:'background-position', value:'1px 2px'}, + {input:':hover:active', prop:'background-repeat', value:'repeat-x'}, + {input:':active:active', prop:'border-collapse', value:'collapse'}, + {input:':hover:hover', prop:'border-spacing', value:'1px 2px'}, + {input:'*:active', prop:'border-top-style', value:'dotted'}, + {input:'*:hover', prop:'border-right-style', value:'dotted'}, + ]; + + var any_elm = [ + // type selector + {input:'a:active, map:active, area:active, link:active, button:active, input:active, menuitem:active, img:active, table:active, tbody:active, tr:active, td:active, body:active, html:active', prop:'top', value:'1px'}, + {input:'a:hover, map:hover, area:hover, link:hover, button:hover, input:hover, menuitem:hover, img:hover, table:hover, tbody:hover, tr:hover, td:hover, body:hover, html:hover', prop:'right', value:'1px'}, + // attribute selector + {input:'[id]:active', prop:'bottom', value:'1px'}, + {input:'[id]:hover', prop:'left', value:'1px'}, + // id selector + {input:'#a:active, #b:active, #map1:active, #c:active, #img1:active, #map2:active, #d:active, #img2:active, #e:active, #f:active, #g:active, #h:active, #i:active, #j:active, #k:active, #l:active, #m:active, #n:active, #o:active, #a_ancestor:active, #table:active, #tbody:active, #tr:active, #td:active, #body:active, #html:active', prop:'caption-side', value:'bottom'}, + {input:'#a:hover, #b:hover, #map1:hover, #c:hover, #img1:hover, #map2:hover, #d:hover, #img2:hover, #e:hover, #f:hover, #g:hover, #h:hover, #i:hover, #j:hover, #k:hover, #l:hover, #m:hover, #n:hover, #o:hover, #a_ancestor:hover, #table:hover, #tbody:hover, #tr:hover, #td:hover, #body:hover, #html:hover', prop:'clear', value:'left'}, + {input:':active#a, :active#b, :active#map1, :active#c, :active#img1, :active#map2, :active#d, :active#img2, :active#e, :active#f, :active#g, :active#h, :active#i, :active#j, :active#k, :active#l, :active#m, :active#n, :active#o, :active#a_ancestor, :active#table, :active#tbody, :active#tr, :active#td, :active#body, :active#html', prop:'list-style-type', value:'circle'}, + {input:':hover#a, :hover#b, :hover#map1, :hover#c, :hover#img1, :hover#map2, :hover#d, :hover#img2, :hover#e, :hover#f, :hover#g, :hover#h, :hover#i, :hover#j, :hover#k, :hover#l, :hover#m, :hover#n, :hover#o, :hover#a_ancestor, :hover#table, :hover#tbody, :hover#tr, :hover#td, :hover#body, :hover#html', prop:'max-height', value:'10000px'}, + // class selector + {input:'.t:active, .x:active', prop:'cursor', value:'move'}, + {input:'.t:hover, .x:hover', prop:'empty-cells', value:'hide'}, + {input:':active.t, :active.x', prop:'max-width', value:'10000px'}, + {input:':hover.t, :hover.x', prop:'min-height', value:'1px'}, + // pseudo-class selector + {input:':lang(en):active', prop:'font-style', value:'italic'}, + {input:':lang(en):hover', prop:'font-variant', value:'small-caps'}, + {input:':active:lang(en)', prop:'min-width', value:'1px'}, + {input:':hover:lang(en)', prop:'overflow', value:'hidden'}, + // pseudo-element selector + {input:':active::before', prop:'top', value:'1px', pseudoElt:'::before'}, + {input:':hover::before', prop:'right', value:'1px', pseudoElt:'::before'}, + {input:':active::after', prop:'bottom', value:'1px', pseudoElt:'::after'}, + {input:':hover::after', prop:'left', value:'1px', pseudoElt:'::after'}, + // as argument + //{input:':matches(:active)', prop:'font-weight', value:'bold'}, + //{input:':matches(:hover)', prop:'list-style-position', value:'inside'}, + ]; + + var stylesheet = ''; + function serialize(t) { + return t.input + '{' + t.prop + ':' + t.value + '}'; + } + + links_only.concat(any_elm).forEach(function(t) { + stylesheet += serialize(t); + }); + var html = document.getElementById('html_tmpl').textContent.replace('{style}', stylesheet); + 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.mode = 'quirks'; + a.mode = 'almost'; + s.mode = 'standards'; + [q, a, s].forEach(function(win) { + win.onmousedown = win.onmouseup = run_tests; + win.onclick = function(e) { + e.preventDefault(); + }; + }); + var test_count = 0; + var total_test_count = q.document.querySelectorAll('.t').length * 3; + + function check_matches(id, win, elm, t, expectMatch) { + var prefix = id + ', ' + win.mode + ': '; + + // .getComputedStyle can be checked both for pseudo-elements and normal elements + test(function() { + assert_equals(win.getComputedStyle(elm, t.pseudoElt).getPropertyValue(t.prop) === t.value, expectMatch); + }, prefix + 'getComputedStyle(' + elm.id + ') with selector ' + t.input); + + // .matches doesn't work with pseudo-elements + if (!t.pseudoElt) { + test(function() { + assert_equals(elm.matches(t.input), expectMatch); + }, prefix + elm.id + '.matches("' + t.input + '")'); + } + } + + function run_tests(e) { + var elm = e.target; + if (elm.classList.contains('t') && !elm.classList.contains('done')) { + if (!elm.matches('.t:active')) { + return; + } + if (elm.tagName != 'AREA') { + elm.classList.add('done'); + } else { + // For <area> we want to style the <img> instead. + if (elm.parentNode.nextElementSibling.tagName != 'IMG') { + throw new Error("<area>'s parent's next element sibling wasn't an <img>"); + } + elm.parentNode.nextElementSibling.classList.add('done'); + } + var id = elm.id; + var win = elm.ownerDocument.defaultView; + do { + if (win.mode === 'quirks') { + links_only.forEach(function(t) { + var elmIsLink = elm.matches('a[href], area[href], link[href]'); + check_matches(id, win, elm, t, elmIsLink); + }); + } else { + links_only.forEach(function(t) { + check_matches(id, win, elm, t, true); + }); + } + any_elm.forEach(function(t) { + check_matches(id, win, elm, t, true); + }); + } while (elm = elm.parentElement); + test_count++; + if (test_count === total_test_count) { + done(); + } + } + } + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks-mode/blocks-ignore-line-height.html b/testing/web-platform/tests/quirks-mode/blocks-ignore-line-height.html new file mode 100644 index 000000000..608a7c15c --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/blocks-ignore-line-height.html @@ -0,0 +1,85 @@ +<!doctype html> +<html> + <head> + <title>The blocks ignore line-height quirk</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:200px; 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>"; + 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', 's_ref'].forEach(function(id) { + win.__proto__.__defineGetter__(id, function() { return win.document.getElementById(id); }); + }); + }); + + var tests = [ + {style:'#ref { display:block }', body: + '<div id=test><font size=1>x</font></div>'+ + '<font id=ref size=1>x</font>'+ + '<div id=s_ref>x</div>'}, + + {style:'#ref { display:block }', body: + '<div id=test><font size=1>x</font><br><font size=1>x</font></div>'+ + '<font id=ref size=1>x<br>x</font>'+ + '<div id=s_ref>x<br>x</div>'}, + + {style:'#ref { display:block }', body: + '<div id=test><font size=1>foo</font><br><font size=1>foo</font><div>x</div></div>'+ + '<font id=ref size=1>foo<br>foo<br><font size=3>x</font></font>'+ + '<div id=s_ref>x<br>x<br>x</div>'}, + + {style:'#ref { display:block } div, #ref { line-height:2 } span { font-size:50% }', body: + '<div id=test><span>x</span></div>'+ + '<span id=ref>x</span>'+ + '<div id=s_ref>x</div>'}, + ]; + + tests.forEach(function(t) { + test(function() { + q.style.textContent = t.style; + a.style.textContent = t.style; + s.style.textContent = t.style; + q.document.body.innerHTML = t.body; + a.document.body.innerHTML = t.body; + s.document.body.innerHTML = t.body; + + assert_equals(q.getComputedStyle(q.test).height, + q.getComputedStyle(q.ref).height, + 'quirks mode'); + assert_equals(a.getComputedStyle(a.test).height, + a.getComputedStyle(a.ref).height, + 'almost standards mode'); + assert_equals(s.getComputedStyle(s.test).height, + s.getComputedStyle(s.s_ref).height, + 'standards mode'); + }, document.title+', '+t.style+t.body); + }); + + done(); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks-mode/hashless-hex-color.html b/testing/web-platform/tests/quirks-mode/hashless-hex-color.html new file mode 100644 index 000000000..cbda90c0a --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/hashless-hex-color.html @@ -0,0 +1,498 @@ +<!doctype html> +<html> + <head> + <title>The hashless hex color quirk</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 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><svg><circle id=svg /><circle id=svg_ref /></svg>"; + 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', 'svg', 'svg_ref'].forEach(function(id) { + win[id] = win.document.getElementById(id); + }); + }); + + var tests = [ + {input:"123", q:"#000123"}, + {input:"023", q:"#000023"}, + {input:"003", q:"#000003"}, + {input:"000", q:"#000"}, + {input:"abc", q:"#abc"}, + {input:"ABC", q:"#abc"}, + {input:"1ab", q:"#0001ab"}, + {input:"1AB", q:"#0001ab"}, + {input:"112233", q:"#123"}, + {input:"012233", q:"#012233"}, + {input:"002233", q:"#023"}, + {input:"000233", q:"#000233"}, + {input:"000033", q:"#003"}, + {input:"000003", q:"#000003"}, + {input:"000000", q:"#000000"}, + {input:"aabbcc", q:"#abc"}, + {input:"AABBCC", q:"#abc"}, + {input:"11aabb", q:"#1ab"}, + {input:"11AABB", q:"#1ab"}, + {input:"\\31 23", q:"#123"}, + {input:"\\61 bc", q:"#abc"}, + {input:"\\41 BC", q:"#abc"}, + {input:"\\31 ab", q:"#1ab"}, + {input:"\\31 AB", q:"#1ab"}, + {input:"\\31 12233", q:"#123"}, + {input:"\\61 abbcc", q:"#abc"}, + {input:"\\41 ABBCC", q:"#abc"}, + {input:"\\31 1aabb", q:"#1ab"}, + {input:"\\31 1AABB", q:"#1ab"}, + {input:"12\\33 ", q:"#000123"}, + {input:"1", q:"#000001"}, + {input:"12", q:"#000012"}, + {input:"1234", q:"#001234"}, + {input:"12345", q:"#012345"}, + {input:"1234567"}, + {input:"12345678"}, + {input:"a"}, + {input:"aa"}, + {input:"aaaa"}, + {input:"aaaaa"}, + {input:"aaaaaaa"}, + {input:"aaaaaaaa"}, + {input:"A"}, + {input:"AA"}, + {input:"AAAA"}, + {input:"AAAAA"}, + {input:"AAAAAAA"}, + {input:"AAAAAAAA"}, + {input:"1a", q:"#00001a"}, + {input:"1abc", q:"#001abc"}, + {input:"1abcd", q:"#01abcd"}, + {input:"1abcdef"}, + {input:"1abcdeff"}, + {input:"+1", q:"#000001"}, + {input:"+12", q:"#000012"}, + {input:"+123", q:"#000123"}, + {input:"+1234", q:"#001234"}, + {input:"+12345", q:"#012345"}, + {input:"+123456", q:"#123456"}, + {input:"+1234567"}, + {input:"+12345678"}, + {input:"-1"}, + {input:"-12"}, + {input:"-123"}, + {input:"-1234"}, + {input:"-12345"}, + {input:"-123456"}, + {input:"-1234567"}, + {input:"-12345678"}, + {input:"+1a", q:"#00001a"}, + {input:"+12a", q:"#00012a"}, + {input:"+123a", q:"#00123a"}, + {input:"+1234a", q:"#01234a"}, + {input:"+12345a", q:"#12345a"}, + {input:"+123456a"}, + {input:"+1234567a"}, + {input:"-1a"}, + {input:"-12a"}, + {input:"-123a"}, + {input:"-1234a"}, + {input:"-12345a"}, + {input:"-123456a"}, + {input:"-1234567a"}, + {input:"-12345678a"}, + {input:"+1A", q:"#00001a"}, + {input:"+12A", q:"#00012a"}, + {input:"+123A", q:"#00123a"}, + {input:"+1234A", q:"#01234a"}, + {input:"+12345A", q:"#12345a"}, + {input:"+123456A"}, + {input:"+1234567A"}, + {input:"-1A"}, + {input:"-12A"}, + {input:"-123A"}, + {input:"-1234A"}, + {input:"-12345A"}, + {input:"-123456A"}, + {input:"-1234567A"}, + {input:"-12345678A"}, + {input:"+a"}, + {input:"+aa"}, + {input:"+aaa"}, + {input:"+aaaa"}, + {input:"+aaaaa"}, + {input:"+aaaaaa"}, + {input:"+aaaaaaa"}, + {input:"+aaaaaaaa"}, + {input:"-a"}, + {input:"-aa"}, + {input:"-aaa"}, + {input:"-aaaa"}, + {input:"-aaaaa"}, + {input:"-aaaaaa"}, + {input:"-aaaaaaa"}, + {input:"-aaaaaaaa"}, + {input:"-aaaaaaaaa"}, + {input:"+A"}, + {input:"+AA"}, + {input:"+AAA"}, + {input:"+AAAA"}, + {input:"+AAAAA"}, + {input:"+AAAAAA"}, + {input:"+AAAAAAA"}, + {input:"+AAAAAAAA"}, + {input:"-A"}, + {input:"-AA"}, + {input:"-AAA"}, + {input:"-AAAA"}, + {input:"-AAAAA"}, + {input:"-AAAAAA"}, + {input:"-AAAAAAA"}, + {input:"-AAAAAAAA"}, + {input:"-AAAAAAAAA"}, + {input:"1.1"}, + {input:"1.11"}, + {input:"1.111"}, + {input:"1.1111"}, + {input:"1.11111"}, + {input:"1.111111"}, + {input:"1.1111111"}, + {input:"+1.1"}, + {input:"+1.11"}, + {input:"+1.111"}, + {input:"+1.1111"}, + {input:"+1.11111"}, + {input:"+1.111111"}, + {input:"+1.1111111"}, + {input:"-1.1"}, + {input:"-1.11"}, + {input:"-1.111"}, + {input:"-1.1111"}, + {input:"-1.11111"}, + {input:"-1.111111"}, + {input:"-1.1111111"}, + {input:"1.1a"}, + {input:"1.11a"}, + {input:"1.111a"}, + {input:"1.1111a"}, + {input:"1.11111a"}, + {input:"1.111111a"}, + {input:"+1.1a"}, + {input:"+1.11a"}, + {input:"+1.111a"}, + {input:"+1.1111a"}, + {input:"+1.11111a"}, + {input:"+1.111111a"}, + {input:"-1.1a"}, + {input:"-1.11a"}, + {input:"-1.111a"}, + {input:"-1.1111a"}, + {input:"-1.11111a"}, + {input:"-1.111111a"}, + {input:"1.0"}, + {input:"11.0"}, + {input:"111.0"}, + {input:"1111.0"}, + {input:"11111.0"}, + {input:"111111.0"}, + {input:"1111111.0"}, + {input:"11111111.0"}, + {input:"+1.0"}, + {input:"+11.0"}, + {input:"+111.0"}, + {input:"+1111.0"}, + {input:"+11111.0"}, + {input:"+111111.0"}, + {input:"+1111111.0"}, + {input:"+11111111.0"}, + {input:"-1.0"}, + {input:"-11.0"}, + {input:"-111.0"}, + {input:"-1111.0"}, + {input:"-11111.0"}, + {input:"-111111.0"}, + {input:"-1111111.0"}, + {input:"-11111111.0"}, + {input:"1.0a"}, + {input:"11.0a"}, + {input:"111.0a"}, + {input:"1111.0a"}, + {input:"11111.0a"}, + {input:"111111.0a"}, + {input:"1111111.0a"}, + {input:"+1.0a"}, + {input:"+11.0a"}, + {input:"+111.0a"}, + {input:"+1111.0a"}, + {input:"+11111.0a"}, + {input:"+111111.0a"}, + {input:"+1111111.0a"}, + {input:"-1.0a"}, + {input:"-11.0a"}, + {input:"-111.0a"}, + {input:"-1111.0a"}, + {input:"-11111.0a"}, + {input:"-111111.0a"}, + {input:"-1111111.0a"}, + {input:"+/**/123"}, + {input:"-/**/123"}, + {input:"+/**/123456"}, + {input:"-/**/123456"}, + {input:"+/**/abc"}, + {input:"-/**/abc"}, + {input:"+/**/abcdef"}, + {input:"-/**/abcdef"}, + {input:"+/**/12a"}, + {input:"-/**/12a"}, + {input:"+/**/12345a"}, + {input:"-/**/12345a"}, + {input:"abg"}, + {input:"aabbcg"}, + {input:"1ag"}, + {input:"1122ag"}, + {input:"ABG"}, + {input:"AABBCG"}, + {input:"1AG"}, + {input:"1122AG"}, + {input:"@a"}, + {input:"@ab"}, + {input:"@abc"}, + {input:"@abcd"}, + {input:"@abcde"}, + {input:"@abcdef"}, + {input:"@1"}, + {input:"@11"}, + {input:"@111"}, + {input:"@1111"}, + {input:"@11111"}, + {input:"@111111"}, + {input:"@1a"}, + {input:"@11a"}, + {input:"@111a"}, + {input:"@1111a"}, + {input:"@11111a"}, + {input:'"a"'}, + {input:'"ab"'}, + {input:'"abc"'}, + {input:'"abcd"'}, + {input:'"abcde"'}, + {input:'"abcdef"'}, + {input:'"1"'}, + {input:'"11"'}, + {input:'"111"'}, + {input:'"1111"'}, + {input:'"11111"'}, + {input:'"111111"'}, + {input:'"1a"'}, + {input:'"11a"'}, + {input:'"111a"'}, + {input:'"1111a"'}, + {input:'"11111a"'}, + {input:"url(a)", svg:'url(a)'}, + {input:"url(aa)", svg:'url(aa)'}, + {input:"url(aaa)", svg:'url(aaa)'}, + {input:"url(aaaa)", svg:'url(aaaa)'}, + {input:"url(aaaaa)", svg:'url(aaaaa)'}, + {input:"url(aaaaaa)", svg:'url(aaaaaa)'}, + {input:"url('a')", svg:'url(a)'}, + {input:"url('aa')", svg:'url(aa)'}, + {input:"url('aaa')", svg:'url(aaa)'}, + {input:"url('aaaa')", svg:'url(aaaa)'}, + {input:"url('aaaaa')", svg:'url(aaaaa)'}, + {input:"url('aaaaaa')", svg:'url(aaaaaa)'}, + {input:"#a"}, + {input:"#aa"}, + {input:"#aaaaa"}, + {input:"#aaaaaaa"}, + {input:"#1"}, + {input:"#11"}, + {input:"#11111"}, + {input:"#1111111"}, + {input:"#1a"}, + {input:"#1111a"}, + {input:"#111111a"}, + {input:"1%"}, + {input:"11%"}, + {input:"111%"}, + {input:"1111%"}, + {input:"11111%"}, + {input:"111111%"}, + {input:"calc(123)"}, + {input:"rgb(119, 255, 255)", q:"#7ff", s:"#7ff", svg:"#7ff"}, + {input:"rgba(119, 255, 255, 001)", q:"#7ff", s:"#7ff", svg:"#7ff"}, + {input:"hsl(100, 100%, 100%)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"hsla(100, 100%, 100%, 001)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"rgb(calc(100 + 155), 255, 255)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"rgba(calc(100 + 155), 255, 255, 001)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"hsl(calc(050 + 050), 100%, 100%)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"hsla(calc(050 + 050), 100%, 100%, 001)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"rgb(/**/255, 255, 255)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"rgb(/**/255/**/, /**/255/**/, /**/255/**/)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"rgb(calc(/**/100/**/ + /**/155/**/), 255, 255)", q:"#fff", s:"#fff", svg:"#fff"}, + {input:"#123 123 abc 12a", q:"#123 #000123 #abc #00012a", shorthand:true}, + {input:"rgb(119, 255, 255) 123", q:"#7ff #000123", shorthand:true}, + {input:"123 rgb(119, 255, 255)", q:"#000123 #7ff", shorthand:true}, + {input:"1e1"}, + {input:"11e1"}, + {input:"111e1"}, + {input:"1111e1"}, + {input:"11111e1"}, + {input:"111111e1"}, + {input:"1e+1"}, + {input:"11e+1"}, + {input:"111e+1"}, + {input:"1111e+1"}, + {input:"11111e+1"}, + {input:"111111e+1"}, + {input:"1e-0"}, + {input:"11e-0"}, + {input:"111e-0"}, + {input:"1111e-0"}, + {input:"11111e-0"}, + {input:"111111e-0"}, + {input:"1e1a"}, + {input:"11e1a"}, + {input:"111e1a"}, + {input:"1111e1a"}, + {input:"11111e1a"}, + {input:"111111e1a"}, + {desc:"1111111111...", input:"1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"}, + {desc:"1111111111...a", input:"1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111a"}, + {desc:"a1111111111...", input:"a1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"}, + ]; + + var props = [ + {prop:'background-color', check:'background-color'}, + {prop:'border-color', check:'border-top-color', check_also:['border-right-color', 'border-bottom-color', 'border-left-color']}, + {prop:'border-top-color', check:'border-top-color'}, + {prop:'border-right-color', check:'border-right-color'}, + {prop:'border-bottom-color', check:'border-bottom-color'}, + {prop:'border-left-color', check:'border-left-color'}, + {prop:'color', check:'color'}, + ]; + var style_template = '#test{{prop}:{test};}' + + '#ref{{prop}:{ref};}'; + + tests.forEach(function(t) { + var name = t.desc || t.input; + var test_q = async_test(name + ' (quirks)'); + var test_a = async_test(name + ' (almost standards)'); + var test_s = async_test(name + ' (standards)'); + var test_svg = async_test(name + ' (SVG)'); + 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); + 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); + assert_equals(a.getComputedStyle(a.test).getPropertyValue(props[i].check), + a.getComputedStyle(a.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(a.getComputedStyle(q.test).getPropertyValue(props[i].check_also[j]), + a.getComputedStyle(q.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); + assert_equals(s.getComputedStyle(s.test).getPropertyValue(props[i].check), + s.getComputedStyle(s.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(s.getComputedStyle(q.test).getPropertyValue(props[i].check_also[j]), + s.getComputedStyle(q.ref).getPropertyValue(props[i].check_also[j]), + props[i].prop + ' checking ' + props[i].check_also[j]); + } + } + }); + test_svg.step(function() { + q.svg.setAttribute('fill', t.input); + a.svg.setAttribute('fill', t.input); + s.svg.setAttribute('fill', t.input); + if (t.svg) { + q.svg_ref.setAttribute('fill', t.svg); + a.svg_ref.setAttribute('fill', t.svg); + s.svg_ref.setAttribute('fill', t.svg); + } else { + q.svg_ref.removeAttribute('fill'); + a.svg_ref.removeAttribute('fill'); + s.svg_ref.removeAttribute('fill'); + } + assert_equals(q.getComputedStyle(q.svg).fill, q.getComputedStyle(q.svg_ref).fill, 'SVG fill="" in quirks mode'); + assert_equals(a.getComputedStyle(a.svg).fill, a.getComputedStyle(a.svg_ref).fill, 'SVG fill="" in almost standards mode'); + assert_equals(s.getComputedStyle(s.svg).fill, s.getComputedStyle(s.svg_ref).fill, 'SVG fill="" in standards mode'); + }); + } + test_q.done(); + test_a.done(); + test_s.done(); + test_svg.done(); + }); + + var other_tests = [ + {input:'background:abc', prop:'background-color'}, + {input:'border-top:1px solid abc', prop:'border-top-color'}, + {input:'border-right:1px solid abc', prop:'border-right-color'}, + {input:'border-bottom:1px solid abc', prop:'border-bottom-color'}, + {input:'border-left:1px solid abc', prop:'border-left-color'}, + {input:'border:1px solid abc', prop:'border-top-color'}, + {input:'outline-color:abc', prop:'outline-color'}, + {input:'outline:1px solid abc', prop:'outline-color'} + ]; + + var other_template = "#test{{test};}" + + 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'); + }, document.title+', excluded property '+t.input); + }); + + done(); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks-mode/historical/list-item-bullet-size-ref.html b/testing/web-platform/tests/quirks-mode/historical/list-item-bullet-size-ref.html new file mode 100644 index 000000000..f449ce992 --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/historical/list-item-bullet-size-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Historical quirk: list item bullet size</title> +<style> +p { margin:0 } +#test { font-size:3em; margin-top:0 } +</style> +<p>There should be a normal-size bullet and a big bullet below.</p> +<ul> + <li> +</ul> +<ul id=test> + <li> +</ul> diff --git a/testing/web-platform/tests/quirks-mode/historical/list-item-bullet-size.html b/testing/web-platform/tests/quirks-mode/historical/list-item-bullet-size.html new file mode 100644 index 000000000..bf996edf7 --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/historical/list-item-bullet-size.html @@ -0,0 +1,16 @@ +<!--quirks--> +<title>Historical quirk: list item bullet size</title> +<link rel=help href=https://quirks.spec.whatwg.org/#goals> +<meta name=assert content="List item bullet size quirk must not be supported."> +<link rel=match href=list-item-bullet-size-ref.html> +<style> +p { margin:0 } +#test { font-size:3em; margin-top:0 } +</style> +<p>There should be a normal-size bullet and a big bullet below.</p> +<ul> + <li> +</ul> +<ul id=test> + <li> +</ul> diff --git a/testing/web-platform/tests/quirks-mode/line-height-calculation.html b/testing/web-platform/tests/quirks-mode/line-height-calculation.html new file mode 100644 index 000000000..7e7f03a99 --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/line-height-calculation.html @@ -0,0 +1,96 @@ +<!doctype html> +<html> + <head> + <title>The line height calculation quirk</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:200px; 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}); + + var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="; + var preload = new Image(); + preload.src = png; + + onload = function() { + var html = "<style id=style></style>"; + 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', 's_ref'].forEach(function(id) { + win.__proto__.__defineGetter__(id, function() { return win.document.getElementById(id); }); + }); + }); + + var tests = [ + {style:'', body:'<div id=test><img src="{png}"></div><img id=ref src="{png}"><div id=s_ref>x</div>'}, + {style:'', body:'<div id=test><img src="{png}"> <img src="{png}"></div><div id=ref>x</div><div id=s_ref>x</div>'}, + {style:'', body:'<table><tr><td id=test><img src="{png}"><tr><td><img id=ref src="{png}"><tr><td id=s_ref>x</table>'}, + {style:'', body:'<table><tr><td id=test><img src="{png}"> <img src="{png}"><tr><td id=ref>x<tr><td id=s_ref>x</table>'}, + {style:'', body:'<pre id=test><img src="{png}"></pre><img id=ref src="{png}"><pre id=s_ref>x</pre>'}, + {style:'', body:'<pre id=test><img src="{png}"> </pre><pre id=ref>x</pre><pre id=s_ref>x</pre>'}, + {style:'span { margin:1px }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref>x</div>'}, + {style:'span { padding:1px 0 }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'}, + {style:'span { margin:0 1px }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref>x</div>'}, + {style:'span { margin:0 1px; padding:1px 0 }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref>x</div>'}, + {style:'span { border-width:1px 0; border-style:solid }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'}, + {style:'span { border-width:1px; border-style:solid none }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'}, + {style:'span { border-width:1px; border-style:solid hidden }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'}, + {style:'span { border-right:1px solid }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'}, + {style:'span { border-left:1px solid }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'}, + {style:'span { padding-right:1px }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'}, + {style:'span { padding-left:1px }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'}, + {style:'span { display:inline-block; height:1px }', body:'<div id=test><i><span></span> </i></div><span id=ref></span><div id=s_ref>x</div>'}, /* 16.6.1: "If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed." */ + {style:'', body:'<div id=test><img src="{png}" border=1></div><img id=ref src="{png}" height=3><div id=s_ref>x</div>'}, + {style:'#test img { padding:1px }', body:'<div id=test><img src="{png}"></div><img id=ref src="{png}" height=3><div id=s_ref>x</div>'}, + {style:'iframe { height:1px }', body:'<div id=test><iframe></iframe></div><img id=ref src="{png}" height=5><div id=s_ref>x</div>'}, + {style:'#test::before { content:"" } #test::before, span { border:solid }', body:'<div id=test></div><div id=ref><span>x</span></div><div id=s_ref><span>x</span></div>'}, + {style:'div { line-height: 0;} span { margin:0 1px; line-height: normal; }', body:'<div id=test>x<span></span></div><div id=ref>x</div><div id=s_ref>x<span>x</span></div>'}, + ]; + + tests.forEach(function(t) { + test(function() { + var style = t.style.replace(/\{png\}/g, png); + var body = t.body.replace(/\{png\}/g, png); + q.style.textContent = style; + a.style.textContent = style; + s.style.textContent = style; + q.document.body.innerHTML = body; + a.document.body.innerHTML = body; + s.document.body.innerHTML = body; + + assert_equals(q.getComputedStyle(q.test).height, + q.getComputedStyle(q.ref).height, + 'quirks mode'); + assert_equals(a.getComputedStyle(a.test).height, + a.getComputedStyle(a.ref).height, + 'almost standards mode'); + assert_equals(s.getComputedStyle(s.test).height, + s.getComputedStyle(s.s_ref).height, + 'standards mode'); + }, document.title+', '+t.style+t.body); + }); + + done(); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks-mode/percentage-height-calculation.html b/testing/web-platform/tests/quirks-mode/percentage-height-calculation.html new file mode 100644 index 000000000..7cadd8b0f --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/percentage-height-calculation.html @@ -0,0 +1,154 @@ +<!doctype html> +<html> + <head> + <title>The percentage height calculation quirk</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:20px; height:200px } </style> + </head> + <body> + <div id=log></div> + <iframe id=quirks></iframe> + <iframe id=almost></iframe> + <iframe id=standards></iframe> + <img id="preload"> + <script> + var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="; + // Ensure png is loaded and cached before we run the tests. Otherwise + // the tests that use it may run while it's not fully loaded and get <img> + // fallback layout (i.e., not an image with a 1x1 intrinsic size). + document.getElementById('preload').src = png; + setup({explicit_done:true}); + + var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="; + var preload = new Image(); + preload.src = png; + + onload = function() { + var html = "<style id=style></style>"; + 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'].forEach(function(id) { + win.__proto__.__defineGetter__(id, function() { return win.document.getElementById(id); }); + }); + }); + + var tests = [ + {style:'#test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'#test { height:50% }', body:'<div id=test></div>', q:92, s:0}, + {style:'#test { height:25% }', body:'<div id=test></div>', q:46, s:0}, + {style:'#test { height:12.5% }', body:'<div id=test></div>', q:23, s:0}, + {style:'#test { height:100% }', body:'<div><div id=test></div></div>', q:184, s:0}, + {style:'', body:'<img id=test src="{png}" height=100%>', q:184, s:1}, + {style:'', body:'<img id=test src="{png}" height=100% border=10>', q:184, s:1}, + {style:'', body:'<table id=test height=100%><tr><td></table>', q:184, s:6}, + {style:'#foo { height:100px } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:100, s:0}, + {style:'#foo { position:absolute } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:0, s:0}, + {style:'#foo { position:relative } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:184, s:0}, + {style:'#foo { height:100px } #test { height:100%; position:absolute }', body:'<div id=foo><div><div id=test></div></div></div>', q:200, s:200}, + {style:'#foo { height:100px } #test { height:100%; position:fixed }', body:'<div id=foo><div><div id=test></div></div></div>', q:200, s:200}, + {style:'#foo { height:100px } #test { height:100%; position:relative }', body:'<div id=foo><div><div id=test></div></div></div>', q:100, s:0}, + {style:'#foo { height:100px } #test { height:calc(100% + 1px) }', body:'<div id=foo><div id=test></div></div>', q:101, s:101}, + {style:'#foo { height:100px } #test { height:5px; height:calc(100% + 1px) }', body:'<div id=foo><div><div id=test></div></div></div>', q:0, s:0}, + {style:'html { display:inline } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, // display:inline on root has no effect + {style:'html { margin:10px } body { display:inline } #test { height:100% }', body:'<div id=test></div>', q:200, s:0}, + {style:'body { margin:0 } #test { height:100% }', body:'<div id=test></div>', q:200, s:0}, + {style:'body { margin:0; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:180, s:0}, + {style:'body { margin:0; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:180, s:0}, + {style:'html { margin:10px } #test { height:100% }', body:'<div id=test></div>', q:164, s:0}, + {style:'html { padding:10px } #test { height:100% }', body:'<div id=test></div>', q:164, s:0}, + {style:'html { border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:164, s:0}, + {style:'html { position:absolute } #test { height:100% }', body:'<div id=test></div>', q:0, s:0}, + {style:'body { position:absolute } #test { height:100% }', body:'<div id=test></div>', q:0, s:0}, + {style:'html { height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'html { height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'html { height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'body { height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:200, s:0}, + {style:'body { height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:200, s:0}, + {style:'body { height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:200, s:0}, + {style:'html { position:absolute; height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'html { position:absolute; height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'html { position:absolute; height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'body { margin:99px 0 } #test { height:100% }', body:'<div id=test></div>', q:2, s:0}, + {style:'body { margin:110px 0 } #test { height:100% }', body:'<div id=test></div>', q:0, s:0}, + {style:'html, body { border:10px none } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + {style:'html, body { border:10px hidden } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, + ]; + + tests.forEach(function(t) { + test(function() { + // Hide scrollbars in all subdocuments so that a horizontal + // scrollbar doesn't appear and upset our calculations. + var style = t.style.replace(/\{png\}/g, png) + " html { overflow:hidden; }"; + var body = t.body.replace(/\{png\}/g, png); + q.style.textContent = style; + a.style.textContent = style; + s.style.textContent = style; + q.document.body.innerHTML = body; + a.document.body.innerHTML = body; + s.document.body.innerHTML = body; + + assert_equals(q.getComputedStyle(q.test).height, + t.q + 'px', + 'quirks mode'); + assert_equals(a.getComputedStyle(a.test).height, + t.s + 'px', + 'almost standards mode'); + assert_equals(s.getComputedStyle(s.test).height, + t.s + 'px', + 'standards mode'); + }, document.title+', '+t.style+t.body); + }); + + var xml_tests = [ + {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></html>', q:184, s:0}, + {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body/><div id="test"/></html>', q:200, s:0}, + {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><span><body><div id="test"/></body></span></html>', q:200, s:0}, + {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body><body><div id="test"/></body></body></html>', q:200, s:0}, + {input:'<html><head xmlns="{html}"><style>#test { height:100% }</style></head><body xmlns="{html}"><div id="test"/></body></html>', q:200, s:0}, + {input:'<div xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></div>', q:200, s:0}, + {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body xmlns=""><div xmlns="{html}" id="test"/></body></html>', q:200, s:0}, + {input:'<HTML xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></HTML>', q:200, s:0}, + {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><BODY><div id="test"/></BODY></html>', q:200, s:0}, + ]; + + var parser = new DOMParser(); + + xml_tests.forEach(function(t) { + test(function() { + var input = t.input.replace(/\{html\}/g, 'http://www.w3.org/1999/xhtml') + .replace(/\{png\}/g, png); + var root = parser.parseFromString(input, 'text/xml').documentElement; + q.document.replaceChild(root.cloneNode(true), q.document.documentElement); + a.document.replaceChild(root.cloneNode(true), a.document.documentElement); + s.document.replaceChild(root, s.document.documentElement); + assert_equals(q.getComputedStyle(q.test).height, + t.q + 'px', + 'quirks mode'); + assert_equals(a.getComputedStyle(a.test).height, + t.s + 'px', + 'almost standards mode'); + assert_equals(s.getComputedStyle(s.test).height, + t.s + 'px', + 'standards mode'); + }, document.title+', '+t.input); + }); + + done(); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks-mode/supports.html b/testing/web-platform/tests/quirks-mode/supports.html new file mode 100644 index 000000000..913f7d9f7 --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/supports.html @@ -0,0 +1,48 @@ +<!--quirks--> +<title>Syntax quirks in @supports/CSS.supports</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel=help href=https://drafts.csswg.org/css-conditional/#at-supports> +<link rel=help href=https://drafts.csswg.org/css-conditional/#the-css-interface> +<link rel=help href=https://quirks.spec.whatwg.org/#the-hashless-hex-color-quirk> +<link rel=help href=https://quirks.spec.whatwg.org/#the-unitless-length-quirk> +<style> + /* sanity check */ + @supports (background-color: lime) { #a { background-color: lime } } + @supports (background-position: 1px 1px) { #a { background-position: 1px 1px } } + /* test */ + @supports (background-color: 00ff00) { #b { background-color: 00ff00 } } + @supports (background-position: 1 1) { #b { background-position: 1 1 } } +</style> +<div id=a></div> +<div id=b></div> +<div id=c></div> <!-- c unstyled --> +<script> +var a = document.getElementById('a'); +var b = document.getElementById('b'); +var c = document.getElementById('c'); + +test(function() { + assert_not_equals(getComputedStyle(a).backgroundColor, getComputedStyle(c).backgroundColor); +}, 'Sanity check @supports color'); + +test(function() { + assert_equals(getComputedStyle(b).backgroundColor, getComputedStyle(a).backgroundColor); +}, '@supports quirky color'); + +test(function() { + assert_false(CSS.supports('background-color', '00ff00')); +}, 'CSS.supports() quirky color'); + +test(function() { + assert_not_equals(getComputedStyle(a).backgroundPosition, getComputedStyle(c).backgroundPosition); +}, 'Sanity check @supports length'); + +test(function() { + assert_equals(getComputedStyle(b).backgroundPosition, getComputedStyle(a).backgroundPosition); +}, '@supports quirky length'); + +test(function() { + assert_false(CSS.supports('background-position', '1 1')); +}, 'CSS.supports() quirky length'); +</script> diff --git a/testing/web-platform/tests/quirks-mode/table-cell-nowrap-minimum-width-calculation.html b/testing/web-platform/tests/quirks-mode/table-cell-nowrap-minimum-width-calculation.html new file mode 100644 index 000000000..2ff00b9ee --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/table-cell-nowrap-minimum-width-calculation.html @@ -0,0 +1,72 @@ +<!doctype html> +<html> + <head> + <title>The table cell nowrap minimum width calculation quirk</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:200px; 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}); + + var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="; + var preload = new Image(); + preload.src = png; + + onload = function() { + var html = "<style id=style></style>"; + 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', 's_ref'].forEach(function(id) { + win.__proto__.__defineGetter__(id, function() { return win.document.getElementById(id); }); + }); + }); + q.title = 'quirks mode'; + a.title = 'almost standards mode'; + s.title = 'standards mode'; + + var tests = [ + {desc:"basic", + style:'table { width:8px } #test { width:10px }', + body:'<table><tr><td id=test nowrap></table>'+ + '<table><tr><td id=ref><img src="{png}" width=10></table>'+ + '<table><tr><td id=s_ref></table>'}, + ]; + + tests.forEach(function(t) { + test(function() { + var style = t.style.replace(/\{png\}/g, png); + var body = t.body.replace(/\{png\}/g, png); + [q, a, s].forEach(function(win) { + win.style.textContent = style; + win.document.body.innerHTML = body; + assert_equals(win.getComputedStyle(win.test).width, + win.getComputedStyle(win == q ? win.ref : win.s_ref).width, + win.title); + }); + }, document.title+', '+t.desc); + }); + + done(); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/quirks-mode/table-cell-width-calculation.html b/testing/web-platform/tests/quirks-mode/table-cell-width-calculation.html new file mode 100644 index 000000000..eeb726627 --- /dev/null +++ b/testing/web-platform/tests/quirks-mode/table-cell-width-calculation.html @@ -0,0 +1,174 @@ +<!doctype html> +<html> + <head> + <title>The table cell width calculation quirk</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> iframe { width:200px; 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}); + + var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="; + var preload = new Image(); + preload.src = png; + + onload = function() { + var html = "<style id=style></style><table><tr><td id=test></table><table><tr><td id=ref></table><table><tr><td id=s_ref></table>"; + 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', 's_ref'].forEach(function(id) { + win.__proto__.__defineGetter__(id, function() { return win.document.getElementById(id); }); + }); + }); + q.title = 'quirks mode'; + a.title = 'almost standards mode'; + s.title = 'standards mode'; + + var tests = [ + {desc:"baseline", + style:'table { width:8px }', // cell content width should be 2px (2px cell-spacing, 1px padding) + test:'<img src="{png}">', + ref:'<img src="{png}">', + s_ref:'<img src="{png}">'}, + + {desc:"basic", + style:'table { width:8px }', + test:'<img src="{png}"><img src="{png}"><img src="{png}">', + ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"inline-block", + style:'table { width:8px } img { display:inline-block }', + test:'<img src="{png}"><img src="{png}"><img src="{png}">', + ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"img in span", + style:'table { width:8px }', + test:'<span><img src="{png}"><img src="{png}"><img src="{png}"></span>', + ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"the don't-wrap rule is only for the purpose of calculating the width of the cell", + style:'table { width:8px }', + test:'<img src="{png}"><wbr><img src="{png}"><img src="{png}"><img src="{png}">', + ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr>'}, + + {desc:"the quirk only applies when the cell is the containing block", + style:'table { width:8px }', + test:'<div><img src="{png}"><img src="{png}"><img src="{png}"></div>', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr>'}, + + {desc:"the quirk shouldn't apply for generated content", + style:'table { width:8px } #test::before { content:url("{png}") url("{png}") url("{png}") }', + test:'', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"the quirk shouldn't apply for <input>", + style:'table { width:8px }', + test:'<input type=image src="{png}"><input type=image src="{png}"><input type=image src="{png}">', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"the quirk shouldn't apply for <object>", + style:'table { width:8px }', + test:'<object data="{png}"></object><object data="{png}"></object><object data="{png}"></object>', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"the quirk shouldn't apply for <embed>", + style:'table { width:8px }', + test:'<embed src="{png}"><embed src="{png}"><embed src="{png}">', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"the quirk shouldn't apply for <video poster>", + style:'table { width:8px }', + test:'<video poster="{png}"></video><video poster="{png}"></video><video poster="{png}"></video>', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"non-auto width on cell", + style:'td { width:2px }', + test:'<img src="{png}"><img src="{png}"><img src="{png}">', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + {desc:"zero width on cell, specified with on table", + style:'table { width:8px } td { width:0 }', + test:'<img src="{png}"><img src="{png}"><img src="{png}">', + ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>', + s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'}, + + // tests below use overwrite body.innerHTML so tests using test/ref/s_ref props need to be above + {desc:"display:table-cell on span", + style:'div { display:table; width:2px } span { display:table-cell }', + body:'<div><span id=test><img src="{png}"><img src="{png}"><img src="{png}"></span></div>'+ + '<div><span id=ref><nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr></span></div>'+ + '<div><span id=s_ref><nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr></span></div>'}, + + {desc:"display:table-cell on span, wbr", + style:'div { display:table; width:2px } span { display:table-cell }', + body:'<div><span id=test><img src="{png}"><wbr><img src="{png}"><img src="{png}"><img src="{png}"></span></div>'+ + '<div><span id=ref><nobr><img src="{png}"><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr></span></div>'+ + '<div><span id=s_ref><nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr></span></div>'}, + ]; + + tests.forEach(function(t) { + test(function() { + var style = t.style.replace(/\{png\}/g, png); + var test = t.test && t.test.replace(/\{png\}/g, png); + var ref = t.ref && t.ref.replace(/\{png\}/g, png); + var s_ref = t.s_ref && t.s_ref.replace(/\{png\}/g, png); + var body = t.body && t.body.replace(/\{png\}/g, png); + [q, a, s].forEach(function(win) { + win.style.textContent = style; + if (body !== undefined) { + win.document.body.innerHTML = body; + } else { + win.test.innerHTML = test; + win.ref.innerHTML = ref; + win.s_ref.innerHTML = s_ref; + } + assert_equals(win.getComputedStyle(win.test).width, + win.getComputedStyle(win == q ? win.ref : win.s_ref).width, + 'cell width, '+win.title); + var test_imgs = win.test.querySelectorAll('img'); + var ref_imgs = win.ref.querySelectorAll('img'); + var s_ref_imgs = win.s_ref.querySelectorAll('img'); + for (var i = 0; i < test_imgs.length; ++i) { + assert_equals(test_imgs[i].offsetLeft, + win == q ? ref_imgs[i].offsetLeft : s_ref_imgs[i].offsetLeft, + 'img '+i+' offsetLeft, '+win.title); + } + }); + }, document.title+', '+t.desc); + }); + + done(); + } + </script> + </body> +</html> 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> |