diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0')
8 files changed, 283 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html new file mode 100644 index 0000000000..d814c0a076 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel=stylesheet href=/fonts/ahem.css> +<link rel=match href=/css/reference/pass_if_square_96px_black.html> +<link rel=help href=https://github.com/whatwg/html/issues/2291> +<link rel=help href=https://drafts.csswg.org/css-content/#content-property> +<style> +.test, .ref { + font: 16px/1 Ahem; + margin: 0; +} +.test br { + /* This should have no affect. Per css-content, <string> when applied to elements. */ + content: ""; +} +</style> +<p>Test passes if there is a square below.</p> +<p class=test>xxxxxx<br>xxxxxx<br>xxxxxx</p> +<p class=ref>xxxxxx<br>xxxxxx<br>xxxxxx</p> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html new file mode 100644 index 0000000000..2ac6f44649 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<link rel=match href=001-ref.html> +<title>The font element text decoration color quirk, 001, almost standards mode</title> +<style>[id] > * { color:fuchsia }</style> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('no-namespace'); +a.textContent = 'foo '; +var elm = document.createElementNS('', 'font'); +elm.textContent = 'no-namespace font element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> +<div><u id="uppercase">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('uppercase'); +a.textContent = 'foo '; +var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT'); +elm.textContent = 'uppercase FONT element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html new file mode 100644 index 0000000000..846cb6e8af --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html @@ -0,0 +1,32 @@ +<link rel=match href=001-ref.html> +<title>The font element text decoration color quirk, 001, quirks mode</title> +<style>[id] > * { color:fuchsia }</style> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('no-namespace'); +a.textContent = 'foo '; +var elm = document.createElementNS('', 'font'); +elm.textContent = 'no-namespace font element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> +<div><u id="uppercase">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('uppercase'); +a.textContent = 'foo '; +var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT'); +elm.textContent = 'uppercase FONT element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html new file mode 100644 index 0000000000..fb632e693d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html @@ -0,0 +1,20 @@ +<title>Reference for The font element text decoration color quirk, 001</title> +<style> +span, div > div { color:fuchsia } +.under { text-decoration:underline } +.over { text-decoration:overline } +.strike { text-decoration:line-through } +</style> +<div>Quirks should not apply:</div> +<div class="under">foo <span>style</span> bar</div> +<div class="under">foo <span>color</span> bar</div> +<div class="under">foo <span>color and style</span> bar</div> +<div class="under">foo <span>color=x and style</span> bar</div> +<div class="under">foo <span>color=transparent and style</span> bar</div> +<div class="under">foo <span>color="" and style</span> bar</div> +<div class="under">foo<div>block</div>bar</div> +<div class="strike">foo <span>line-through</span> bar</div> +<div class="over">foo <span>overline</span> bar</div> +<div class="under">foo <span>span</span> bar</div> +<div class="under">foo <span>no-namespace font element</span> bar</div> +<div class="under">foo <span>uppercase FONT element</span> bar</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html new file mode 100644 index 0000000000..d781fab289 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html @@ -0,0 +1,33 @@ +<!doctype html> +<link rel=match href=001-ref.html> +<title>The font element text decoration color quirk, 001, standards mode</title> +<style>[id] > * { color:fuchsia }</style> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('no-namespace'); +a.textContent = 'foo '; +var elm = document.createElementNS('', 'font'); +elm.textContent = 'no-namespace font element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> +<div><u id="uppercase">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('uppercase'); +a.textContent = 'foo '; +var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT'); +elm.textContent = 'uppercase FONT element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml new file mode 100644 index 0000000000..623b346eea --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<link rel="match" href="001-ref.html"/> +<title>The font element text decoration color quirk, 001, XHTML</title> +<style>[id] > * { color:fuchsia }</style> +</head> +<body> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">foo <font xmlns="">no-namespace font element</font> bar</u></div> +<div><u id="uppercase">foo <FONT>uppercase FONT element</FONT> bar</u></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html new file mode 100644 index 0000000000..a37da3c45f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>font face</title> +<link rel="help" href="https://html.spec.whatwg.org/#the-font-element-text-decoration-color-quirk"> +<link rel="author" title="Intel" href="http://www.intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + +const types = ["serif", "sans-serif", "cursive", "fantasy", "monospace"]; +for (let type of types) { + test(() => { + let elem = document.createElement("font"); + elem.setAttribute("face", type); + document.body.appendChild(elem); + let exp_type = window.getComputedStyle(elem, null).getPropertyValue("font-family"); + assert_equals(exp_type, type); + }, `font face attribute ${type} is correct`); +} + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html new file mode 100644 index 0000000000..8e8b9f28eb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>font size</title> +<link rel="help" href="https://html.spec.whatwg.org/#the-font-element-text-decoration-color-quirk"> +<link rel="author" title="Intel" href="http://www.intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> + +<script> + +const modes = ["", "+", "-"]; +const values = ["0", "1", "2", "3", "4", "5", "6", "7", "8"]; +const rels = [ + ["1", "x-small"], + ["2", "small"], + ["3", "medium"], + ["4", "large"], + ["5", "x-large"], + ["6", "xx-large"], + ["7", "xxx-large"] +]; +let results = getCSSFontSize(rels); + +function cal(n) { + //If value is greater than 7, let it be 7 + //If value is less than 1, let it be 1 + return n > 7 ? 7 : (n < 1 ? 1 : n); +} + +function getRealInput(mode, value) { + switch(mode) { + case "+": + //If mode is relative-plus, then increment value by 3 + return cal(3 + parseInt(value)); + case "-": + // If mode is relative-minus, then let value be the result of subtracting value from 3 + return cal(3 - parseInt(value)); + default: + return cal(parseInt(value)); + } +} + +function getCSSFontSize(rels) { + let results = {}; + for (let [key, value] of rels) { + if (key == "7") { + //The 'xxx-large' value is a non-CSS value used here to indicate a font size 50% larger than 'xx-large'. + let size = parseInt(results["6"]) * 1.5; + results[key] = size.toString(); + return results; + } + let elem = document.createElement("span"); + document.body.appendChild(elem); + elem.setAttribute("style", `font-size: ${value}`); + let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size"); + results[key] = exp_size.slice(0, -2); + } + return results; +} + +for (let mode of modes) { + for (let value of values) { + test(() => { + let size = getRealInput(mode, value); + let elem = document.createElement("font"); + elem.setAttribute("size", `${mode}${value}`); + document.body.appendChild(elem); + let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size"); + assert_equals(exp_size.slice(0, -2), results[size]); + }, `font size attribute ${mode}${value} is correct`); + } +} + +test(() => { + let span_elem = document.createElement("span"); + document.body.appendChild(span_elem); + span_elem.setAttribute("style", "font-size: medium"); + let span_size = window.getComputedStyle(span_elem, null).getPropertyValue("font-size"); + + let font_elem = document.createElement("font"); + document.body.appendChild(font_elem); + let font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", ""); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", " "); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", " 3"); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", "3"); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); +}, "font size default value is 3"); + +</script> |