diff options
Diffstat (limited to 'layout/reftests/generated-content')
42 files changed, 1012 insertions, 0 deletions
diff --git a/layout/reftests/generated-content/attr-whitespace-ref.html b/layout/reftests/generated-content/attr-whitespace-ref.html new file mode 100644 index 0000000000..54a74fe4d8 --- /dev/null +++ b/layout/reftests/generated-content/attr-whitespace-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div>HelloWorld</div> +<div>HelloWorld</div> +<div>HelloWorld</div> +<div>Hello</div> +<div>Hello</div> +</body> +</html> diff --git a/layout/reftests/generated-content/attr-whitespace.xhtml b/layout/reftests/generated-content/attr-whitespace.xhtml new file mode 100644 index 0000000000..e9b6554849 --- /dev/null +++ b/layout/reftests/generated-content/attr-whitespace.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Whitespace in attributes</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="https://drafts.csswg.org/css-values-3/#attr-notation"/> +<style> +@namespace ns url(http://www.example.com/ns); +/* Spaces within attr() are fine*/ +#a::after { + + content: attr( + data-text + + + ); +} +#b::after { + + content: attr(ns|data-text); +} +#c::after { + + content: attr( + ns|data-text + + + ); +} + +/* No whitespace around the | */ +#d::after { + + content: attr( + ns |data-text + + + ); +} +#e::after { + + content: attr( + ns| data-text + + + ); +} +</style> +</head> +<body xmlns:ns="http://www.example.com/ns"> +<div id="a" data-text="World">Hello</div> +<div id="b" ns:data-text="World">Hello</div> +<div id="b" ns:data-text="World">Hello</div> +<div id="d" ns:data-text="World">Hello</div> +<div id="e" ns:data-text="World">Hello</div> +</body> +</html> diff --git a/layout/reftests/generated-content/before-style-sharing-ref.html b/layout/reftests/generated-content/before-style-sharing-ref.html new file mode 100644 index 0000000000..944bcfd790 --- /dev/null +++ b/layout/reftests/generated-content/before-style-sharing-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div></div> +<div>This text should appear</div> diff --git a/layout/reftests/generated-content/before-style-sharing.html b/layout/reftests/generated-content/before-style-sharing.html new file mode 100644 index 0000000000..9f1be5b32e --- /dev/null +++ b/layout/reftests/generated-content/before-style-sharing.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<style> + [foo]:before { + content: "This text should appear"; + } +</style> +<div></div> +<div foo></div> diff --git a/layout/reftests/generated-content/display-types-01-ref.html b/layout/reftests/generated-content/display-types-01-ref.html new file mode 100644 index 0000000000..76a02e5789 --- /dev/null +++ b/layout/reftests/generated-content/display-types-01-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +div { border:1px solid green; margin:5px; } +</style> +</head> +<body> +<table width="100%"><tr><td valign="top"> + <div><span style="display:block">1<img src="square-outline-32x32.png">"Before block</span +>Inner<span style="display:block">2<img src="square-outline-32x32.png">After block"</span +></div> + <div><span style="display:inline">1<img src="square-outline-32x32.png">"Before inline</span +>Inner<span style="display:inline">2<img src="square-outline-32x32.png">After inline"</span +></div> + <div><span style="display:inline-block">1<img src="square-outline-32x32.png">"Before inline-block</span +>Inner<span style="display:inline-block">2<img src="square-outline-32x32.png">After inline-block"</span +></div> + <div><span style="display:table">1<img src="square-outline-32x32.png">"Before table</span +>Inner<span style="display:table">2<img src="square-outline-32x32.png">After table"</span +></div> + <div><span style="display:inline-table">1<img src="square-outline-32x32.png">"Before inline-table</span +>Inner<span style="display:inline-table">2<img src="square-outline-32x32.png">After inline-table"</span +></div> + <div><span style="display:table-row-group">1<img src="square-outline-32x32.png">"Before table-row-group</span +>Inner<span style="display:table-row-group">2<img src="square-outline-32x32.png">After table-row-group"</span +></div> +</td><td valign="top"> + <div><span style="display:table-row">1<img src="square-outline-32x32.png">"Before table-row</span +>Inner<span style="display:table-row">2<img src="square-outline-32x32.png">After table-row"</span +></div> + <div><span style="display:table-cell">1<img src="square-outline-32x32.png">"Before table-cell</span +>Inner<span style="display:table-cell">2<img src="square-outline-32x32.png">After table-cell"</span +></div> + <div><span style="display:table-caption">1<img src="square-outline-32x32.png">"Before table-caption</span +>Inner<span style="display:table-caption">2<img src="square-outline-32x32.png">After table-caption"</span +></div> + <div><span style="display:-moz-box">1<img src="square-outline-32x32.png">"Before flexbox</span +>Inner<span style="display:-moz-box">2<img src="square-outline-32x32.png">After flexbox"</span +></div> + <div><span style="display:-moz-inline-box">1<img src="square-outline-32x32.png">"Before inline-flexbox</span +>Inner<span style="display:-moz-inline-box">2<img src="square-outline-32x32.png">After inline-flexbox"</span +></div> +</body> +</html> diff --git a/layout/reftests/generated-content/display-types-01.html b/layout/reftests/generated-content/display-types-01.html new file mode 100644 index 0000000000..db2c9525e0 --- /dev/null +++ b/layout/reftests/generated-content/display-types-01.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/> + <meta name="flags" content="" /> +<style> +div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"} + +div::before { + content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class); + counter-increment:ctr; +} +div::after { + content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote; + counter-increment:ctr; +} + +.block::before, .block::after { display:block; } +.inline::before, .inline::after { display:inline; } +.inline-block::before, .inline-block::after { display:inline-block; } +.table::before, .table::after { display:table; } +.inline-table::before, .inline-table::after { display:inline-table; } +.table-row-group::before, .table-row-group::after { display:table-row-group; } +.table-row::before, .table-row::after { display:table-row; } +.table-cell::before, .table-cell::after { display:table-cell; } +.table-caption::before, .table-caption::after { display:table-caption; } +.flexbox::before, .flexbox::after { display:-moz-box; } +.inline-flexbox::before, .inline-flexbox::after { display:-moz-inline-box; } + +div { border:1px solid green; margin:5px; } +</style> +</head> + +<body> +<table width="100%"><tr><td valign="top"> + <div class="block">Inner</div> + <div class="inline">Inner</div> + <div class="inline-block">Inner</div> + <div class="table">Inner</div> + <div class="inline-table">Inner</div> + <div class="table-row-group">Inner</div> +</td><td valign="top"> + <div class="table-row">Inner</div> + <div class="table-cell">Inner</div> + <div class="table-caption">Inner</div> + <div class="flexbox">Inner</div> + <div class="inline-flexbox">Inner</div> +</td></tr></table> +</body> +</html> diff --git a/layout/reftests/generated-content/dynamic-attr-01-ref.html b/layout/reftests/generated-content/dynamic-attr-01-ref.html new file mode 100644 index 0000000000..f460142fec --- /dev/null +++ b/layout/reftests/generated-content/dynamic-attr-01-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="font-family:sans-serif;"> +before after! +</body> +</html> diff --git a/layout/reftests/generated-content/dynamic-attr-01.html b/layout/reftests/generated-content/dynamic-attr-01.html new file mode 100644 index 0000000000..87240768d3 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-attr-01.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/> + <meta name="flags" content="dom" /> +<style> +body { + font-family:sans-serif; +} +body::before { + content:attr(my-attr); +} +body::after { + content:attr(my-attr-2); +} +</style> +<script> +function fixupDOM() { + document.body.setAttribute("my-attr", "before"); + document.body.setAttribute("my-attr-2", "after!"); + document.documentElement.className = ""; +} +</script> +</head> +<body my-attr-2="xyz" onload="fixupDOM()"> +</body> +</html> diff --git a/layout/reftests/generated-content/dynamic-button-01-ref.html b/layout/reftests/generated-content/dynamic-button-01-ref.html new file mode 100644 index 0000000000..5afde3aa15 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-button-01-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<button class="test"> + Button contents + <span>::after content</span></button> diff --git a/layout/reftests/generated-content/dynamic-button-01a.html b/layout/reftests/generated-content/dynamic-button-01a.html new file mode 100644 index 0000000000..1978d79741 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-button-01a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +.test::after { + content:"::after content"; +} +</style> + +<button> + Button contents +</button> +<script> + var td = document.querySelector("button"); + td.offsetWidth; + td.className = "test"; +</script> diff --git a/layout/reftests/generated-content/dynamic-button-01b.html b/layout/reftests/generated-content/dynamic-button-01b.html new file mode 100644 index 0000000000..fff73c523f --- /dev/null +++ b/layout/reftests/generated-content/dynamic-button-01b.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +.test::after { + content:"::after content"; +} +</style> + +<button class="test"> + Button contents +</button> diff --git a/layout/reftests/generated-content/dynamic-content-ref.html b/layout/reftests/generated-content/dynamic-content-ref.html new file mode 100644 index 0000000000..0f8f612628 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-content-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<style> +div::before { + content: "Woof"; +} +</style> +<div></div> diff --git a/layout/reftests/generated-content/dynamic-content.html b/layout/reftests/generated-content/dynamic-content.html new file mode 100644 index 0000000000..5eebe244a7 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-content.html @@ -0,0 +1,14 @@ +<!doctype html> +<style> +div::before { + content: none; +} +.foo::before { + content: "Woof"; +} +</style> +<div></div> +<script> + document.body.offsetTop; + document.querySelector('div').classList.add('foo'); +</script> diff --git a/layout/reftests/generated-content/dynamic-fieldset-01-ref.html b/layout/reftests/generated-content/dynamic-fieldset-01-ref.html new file mode 100644 index 0000000000..7cfdc0278a --- /dev/null +++ b/layout/reftests/generated-content/dynamic-fieldset-01-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<fieldset class="test"> + Fieldset contents + <span>::after content</span></fieldset> diff --git a/layout/reftests/generated-content/dynamic-fieldset-01a.html b/layout/reftests/generated-content/dynamic-fieldset-01a.html new file mode 100644 index 0000000000..7cce024093 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-fieldset-01a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +.test::after { + content:"::after content"; +} +</style> + +<fieldset> + Fieldset contents +</fieldset> +<script> + var td = document.querySelector("fieldset"); + td.offsetWidth; + td.className = "test"; +</script> diff --git a/layout/reftests/generated-content/dynamic-fieldset-01b.html b/layout/reftests/generated-content/dynamic-fieldset-01b.html new file mode 100644 index 0000000000..d9d0fa96b4 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-fieldset-01b.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +.test::after { + content:"::after content"; +} +</style> + +<fieldset class="test"> + Fieldset contents +</fieldset> diff --git a/layout/reftests/generated-content/dynamic-generated-content-inherit-001.html b/layout/reftests/generated-content/dynamic-generated-content-inherit-001.html new file mode 100644 index 0000000000..0bec9c9eaf --- /dev/null +++ b/layout/reftests/generated-content/dynamic-generated-content-inherit-001.html @@ -0,0 +1,25 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic ::before and ::after generation by a style attribute</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="match" href="generated-content-inherit-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#generated-content"> +<meta name="flags" content=""> +<meta name="assert" content="Tests that changes to the style attribute of an element properly generate generated content"> +<!-- + TODO(emilio): upstream this to WPT once + https://github.com/w3c/csswg-drafts/issues/1757 is resolved +--> +<style> +.first::before, .second::after { + content: inherit; +} +</style> +<p>Test passes if you see two PASS lines below:</p> +<div class="first">SS</div> +<div class="second">PA</div> +<script> +document.body.offsetTop; +document.querySelector(".first").style.content = "\"PA\""; +document.querySelector(".second").style.content = "\"SS\""; +</script> diff --git a/layout/reftests/generated-content/dynamic-restyle-01-ref.html b/layout/reftests/generated-content/dynamic-restyle-01-ref.html new file mode 100644 index 0000000000..39973882b2 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-restyle-01-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="border:2px solid red;"> +<span style="border:2px solid red;">Before</span> +<div>After</div> +</body> +</html> diff --git a/layout/reftests/generated-content/dynamic-restyle-01.html b/layout/reftests/generated-content/dynamic-restyle-01.html new file mode 100644 index 0000000000..aa1b846593 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-restyle-01.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/> + <meta name="flags" content="dom" /> +<style> +body::before { + content:"Before"; + border:inherit; +} +.cl::after { + display:block; + content:"After"; +} +</style> +<script> +function fixupDOM() { + document.body.setAttribute("style", "border:2px solid red;"); + document.body.className = "cl"; + document.documentElement.className = ""; +} +</script> +</head> +<body onload="fixupDOM()"> +</body> +</html> diff --git a/layout/reftests/generated-content/dynamic-table-cell-01-ref.html b/layout/reftests/generated-content/dynamic-table-cell-01-ref.html new file mode 100644 index 0000000000..02db86fcaa --- /dev/null +++ b/layout/reftests/generated-content/dynamic-table-cell-01-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<table> + <tr> + <td class="test"> + Cell contents + <span>::after content</span></td> + </tr> +</table> diff --git a/layout/reftests/generated-content/dynamic-table-cell-01a.html b/layout/reftests/generated-content/dynamic-table-cell-01a.html new file mode 100644 index 0000000000..f0bd6b119d --- /dev/null +++ b/layout/reftests/generated-content/dynamic-table-cell-01a.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<style> +.test::after { + content:"::after content"; +} +</style> + +<table> + <tr> + <td> + Cell contents + </td> + </tr> +</table> + +<script> + var td = document.querySelector("td"); + td.offsetWidth; + td.className = "test"; +</script> diff --git a/layout/reftests/generated-content/dynamic-table-cell-01b.html b/layout/reftests/generated-content/dynamic-table-cell-01b.html new file mode 100644 index 0000000000..43e68eb0ba --- /dev/null +++ b/layout/reftests/generated-content/dynamic-table-cell-01b.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.test::after { + content:"::after content"; +} +</style> +<table> + <tr> + <td class="test"> + Cell contents + </td> + </tr> +</table> diff --git a/layout/reftests/generated-content/dynamic-table-cell-indent-ref.html b/layout/reftests/generated-content/dynamic-table-cell-indent-ref.html new file mode 100644 index 0000000000..b831182613 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-table-cell-indent-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<table cellpadding="0"> + <tr><td style="text-indent: 50px">Some text</td></tr> +</table> diff --git a/layout/reftests/generated-content/dynamic-table-cell-indent.html b/layout/reftests/generated-content/dynamic-table-cell-indent.html new file mode 100644 index 0000000000..ea9a25bca8 --- /dev/null +++ b/layout/reftests/generated-content/dynamic-table-cell-indent.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <style> + tr::before { + content: "Some text"; + display: table-cell; + } + tr.i::before { + text-indent: 50px; + } + </style> + <table cellpadding="0"> + <tr></tr> + </table> + <script> + onload = function() { + var tr = document.querySelector("tr"); + // Make sure it's laid out + window.w = tr.offsetWidth; + document.querySelector("tr").className = "i"; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/layout/reftests/generated-content/floated-01-ref.html b/layout/reftests/generated-content/floated-01-ref.html new file mode 100644 index 0000000000..de4da62838 --- /dev/null +++ b/layout/reftests/generated-content/floated-01-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +div { border:1px solid green; margin:5px; } +div { overflow:auto; } +</style> +</head> +<body> +<div><span style="float:left">1<img src="square-outline-32x32.png">"Before beforeleft afterleft</span +>Inner<span style="float:left">2<img src="square-outline-32x32.png">After beforeleft afterleft"</span +></div> +<div><span style="float:left">1<img src="square-outline-32x32.png">"Before beforeleft afterright</span +>Inner<span style="float:right">2<img src="square-outline-32x32.png">After beforeleft afterright"</span +></div> +<div><span style="float:right">1<img src="square-outline-32x32.png">"Before beforeright afterleft</span +>Inner<span style="float:left">2<img src="square-outline-32x32.png">After beforeright afterleft"</span +></div> +<div><span style="float:right">1<img src="square-outline-32x32.png">"Before beforeright afterright</span +>Inner<span style="float:right">2<img src="square-outline-32x32.png">After beforeright afterright"</span +></div> +</body> +</html> diff --git a/layout/reftests/generated-content/floated-01.html b/layout/reftests/generated-content/floated-01.html new file mode 100644 index 0000000000..f3ff0115a4 --- /dev/null +++ b/layout/reftests/generated-content/floated-01.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/> + <meta name="flags" content="" /> +<style> +div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; } + +div::before { + content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class); + counter-increment:ctr; +} +div::after { + content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote; + counter-increment:ctr; +} + +.beforeleft::before { + float:left; +} +.beforeright::before { + float:right; +} +.afterleft::after { + float:left; +} +.afterright::after { + float:right; +} + +div { border:1px solid green; margin:5px; } +div { overflow:auto; } +</style> +</head> +<body> +<div class="beforeleft afterleft">Inner</div> +<div class="beforeleft afterright">Inner</div> +<div class="beforeright afterleft">Inner</div> +<div class="beforeright afterright">Inner</div> +</body> +</html> diff --git a/layout/reftests/generated-content/generated-content-inherit-001-ref.html b/layout/reftests/generated-content/generated-content-inherit-001-ref.html new file mode 100644 index 0000000000..c15156138e --- /dev/null +++ b/layout/reftests/generated-content/generated-content-inherit-001-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<p>Test passes if you see two PASS lines below:</p> +<div>PASS</div> +<div>PASS</div> diff --git a/layout/reftests/generated-content/generated-content-inherit-001.html b/layout/reftests/generated-content/generated-content-inherit-001.html new file mode 100644 index 0000000000..67b9f242df --- /dev/null +++ b/layout/reftests/generated-content/generated-content-inherit-001.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: ::before and ::after generated with content: inherit</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="match" href="generated-content-inherit-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#generated-content"> +<meta name="flags" content=""> +<meta name="assert" content="Tests that pseudo-elements are properly generated with content: inherit"> +<!-- + TODO(emilio): upstream this to WPT once + https://github.com/w3c/csswg-drafts/issues/1757 is resolved +--> +<style> +.first::before, .second::after { + content: inherit; +} +</style> +<p>Test passes if you see two PASS lines below:</p> +<div class="first" style="content: 'PA'">SS</div> +<div class="second" style="content: 'SS'">PA</div> diff --git a/layout/reftests/generated-content/images-01-ref.html b/layout/reftests/generated-content/images-01-ref.html new file mode 100644 index 0000000000..c201db3514 --- /dev/null +++ b/layout/reftests/generated-content/images-01-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +div { border:1px solid green; margin:5px; } +</style> +</head> +<body> +<div>Inner</div> +</body> +</html> diff --git a/layout/reftests/generated-content/images-01.html b/layout/reftests/generated-content/images-01.html new file mode 100644 index 0000000000..b15b502ac6 --- /dev/null +++ b/layout/reftests/generated-content/images-01.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/> + <meta name="flags" content="" /> +<style> +div::before { + content:url(missing-image.png); +} +div { border:1px solid green; margin:5px; } +</style> +</head> +<div>Inner</div> +</body> +</html> diff --git a/layout/reftests/generated-content/positioned-01-ref.html b/layout/reftests/generated-content/positioned-01-ref.html new file mode 100644 index 0000000000..b4fbb25fbe --- /dev/null +++ b/layout/reftests/generated-content/positioned-01-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +div { border:1px solid green; margin:5px; height:100px; } +</style> +</head> +<div><span style="position:absolute; left:0">1<img src="square-outline-32x32.png">"Before gen abs</span +>Inner<span style="position:absolute; right:0">2<img src="square-outline-32x32.png">After gen abs"</span +></div> +<div style="position:relative"><span style="position:absolute; left:0">1<img src="square-outline-32x32.png">"Before gen abs</span +>Inner<span style="position:absolute; right:0">2<img src="square-outline-32x32.png">After gen abs"</span +></div> +<div><span style="position:relative; top:-10px;">1<img src="square-outline-32x32.png">"Before gen rel</span +>Inner<span style="position:relative; top:10px;">2<img src="square-outline-32x32.png">After gen rel"</span +></div> +<div>Begin <span style="position:relative; top:-10px;">1<img src="square-outline-32x32.png">"Before gen rel</span +>Inner<span style="position:relative; top:10px;">2<img src="square-outline-32x32.png">After gen rel"</span +> End</div> +</body> +</html> diff --git a/layout/reftests/generated-content/positioned-01.html b/layout/reftests/generated-content/positioned-01.html new file mode 100644 index 0000000000..3dbd7f8549 --- /dev/null +++ b/layout/reftests/generated-content/positioned-01.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/> + <meta name="flags" content="" /> +<style> +div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; } + +.gen::before { + content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class); + counter-increment:ctr; +} +.gen::after { + content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote; + counter-increment:ctr; +} + +.abs::before { + position:absolute; + left:0; +} +.abs::after { + position:absolute; + right:0; +} + +.rel::before { + position:relative; + top:-10px; +} +.rel::after { + position:relative; + top:10px; +} + +div { border:1px solid green; margin:5px; height:100px; } +</style> +</head> +<div class="gen abs">Inner</div> +<!-- an element should be the containing block for its positioned content --> +<div style="position:relative;" class="gen abs">Inner</div> +<div class="gen rel">Inner</div> +<div>Begin <span class="gen rel">Inner</span> End</div> +</body> +</html> diff --git a/layout/reftests/generated-content/quotes-001-ref.xml b/layout/reftests/generated-content/quotes-001-ref.xml new file mode 100644 index 0000000000..90ce6ff506 --- /dev/null +++ b/layout/reftests/generated-content/quotes-001-ref.xml @@ -0,0 +1,13 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS and Quotes: Counting Right (Slightly Simpler Version)</title> + <style type="text/css"> + <![CDATA[ + .test { margin-left: 2em; } + ]]> + </style> + </head> + <body> + <div class="test">Isn't it wonderful to see CSS quotes work!!!</div> + </body> +</html> diff --git a/layout/reftests/generated-content/quotes-001.xml b/layout/reftests/generated-content/quotes-001.xml new file mode 100644 index 0000000000..4085c44acb --- /dev/null +++ b/layout/reftests/generated-content/quotes-001.xml @@ -0,0 +1,93 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + +<!-- + +Test originally from +http://www.hixie.ch/tests/adhoc/css/quotes/001.xml , +relicensed to MPL/LGPL/GPL tri-license per Hixie's permission on IRC, +March 5, 2009, and upgraded to MPL 2. + +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS and Quotes: Counting Right (Slightly Simpler Version)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#quotes"/> + <meta name="flags" content="" /> + <style type="text/css"> + <![CDATA[ + .party1 * { display: inline; } + .party1 .a { quotes: "Isn" "'" + "t" "FAIL!" + "FAIL!" " i"; } + .party1 .b { quotes: "" "FAIL!!" + " wonderful" "!!!" + " to " " work" + "see " " [FAIL to]" + "C" "quotes" + "S" " "; } + .party1 .c { quotes: none; } + .party1 .d { quotes: "FAIL!" "FAIL!" + "FAIL!" "FAIL!" + "" ""; } + .test { margin-left: 2em; } + .test .no-open:before { content: no-open-quote; } + .test .open:before { content: open-quote; } + .test .triple-open:before { content: open-quote open-quote open-quote; } + .test .no-close:after { content: no-close-quote; } + .test .triple-no-close:after { content: no-close-quote no-close-quote no-close-quote; } + .test .close:after { content: close-quote; } + .test .triple-close:after { content: close-quote close-quote close-quote; } + .test .no-close-open:before { content: no-close-quote open-quote; } + + ]]> + </style> + </head> + <body> + + <!-- this is the same as the 002.xml version except the <br> and <hr> nodes are <div>s. --> + + <!-- Isn't it wonderful to see CSS quotes work!!! + --><div class="test c party1"><!-- c 0 + --><div class="a open close"><!-- open a 1 isn + --></div><!-- close a 0 ' + --><div class="a"><!-- a 0 + --><div class="c open"><!-- open c 1 + --><div class="a open"><!-- open a 2 t + --></div><!-- a 2 + --></div><!-- c 2 + --><div class="no-open close"><!-- a 3 [FAIL!] + --></div><!-- close a 2 i + --></div><!-- a 2 + --><div class="no-close-open no-close a"><!-- a 2 [FAIL!] t + --></div><!-- close a 1 + --><div class="d no-open no-close"><!-- open d 2 [FAIL!] + --><div class="open close"><!-- open d 3 + --><div class="open close"><!-- open d 4 + --></div><!-- close d 3 + --></div><!-- close d 2 + --></div><!-- close d 1 [FAIL!] + --><div class="b no-close"><!-- b 1 + --><div class="triple-no-close"/><!-- close b 0 [FAIL!!] + --><div class="triple-open"/><!-- open x 3 b 3 "", "wonderful ", "to " + --><div class="triple-open"/><!-- open x 3 b 6 "see ", "C", "S" + --><div class="open close"><!-- open b 7 S + --><div class="close"><!-- b 7 + --><div class="no-close"><!-- b 7 + --><div class="close"><!-- b 7 + --><div class="no-close"><!-- b 7 + --><div class="close"><!-- b 7 + --></div><!-- close b 6 " " + --></div><!-- close b 5 [" "] + --></div><!-- close b 4 quotes + --></div><!-- close b 3 [ FAIL to] + --></div><!-- close b 2 work + --></div><!-- close b 1 !!! + --></div><!-- close b 0 [FAIL!!] + --></div><!-- b 0 + --> + + </body> +</html> diff --git a/layout/reftests/generated-content/reftest.list b/layout/reftests/generated-content/reftest.list new file mode 100644 index 0000000000..e464ab33d3 --- /dev/null +++ b/layout/reftests/generated-content/reftest.list @@ -0,0 +1,24 @@ +# Almost all tests in this file have fuzz on OS X 10.10 due to bug 1220052. + +== display-types-01.html display-types-01-ref.html +== dynamic-attr-01.html dynamic-attr-01-ref.html +== dynamic-button-01a.html dynamic-button-01-ref.html +== dynamic-button-01b.html dynamic-button-01-ref.html +== dynamic-fieldset-01a.html dynamic-fieldset-01-ref.html +== dynamic-fieldset-01b.html dynamic-fieldset-01-ref.html +== dynamic-restyle-01.html dynamic-restyle-01-ref.html +== dynamic-table-cell-01a.html dynamic-table-cell-01-ref.html +== dynamic-table-cell-01b.html dynamic-table-cell-01-ref.html +== dynamic-table-cell-indent.html dynamic-table-cell-indent-ref.html +== floated-01.html floated-01-ref.html +== images-01.html images-01-ref.html +== positioned-01.html positioned-01-ref.html +== quotes-001.xml quotes-001-ref.xml +== table-ignoring-whitespace-01.html table-ignoring-whitespace-01-ref.html +== table-parts-01.html table-parts-01-ref.html +== before-style-sharing.html before-style-sharing-ref.html +== transitive-style-invalidation.html transitive-style-invalidation-ref.html +== dynamic-content.html dynamic-content-ref.html +== generated-content-inherit-001.html generated-content-inherit-001-ref.html +== dynamic-generated-content-inherit-001.html generated-content-inherit-001-ref.html +== attr-whitespace.xhtml attr-whitespace-ref.html
\ No newline at end of file diff --git a/layout/reftests/generated-content/square-outline-32x32.png b/layout/reftests/generated-content/square-outline-32x32.png Binary files differnew file mode 100644 index 0000000000..917163f409 --- /dev/null +++ b/layout/reftests/generated-content/square-outline-32x32.png diff --git a/layout/reftests/generated-content/table-ignoring-whitespace-01-ref.html b/layout/reftests/generated-content/table-ignoring-whitespace-01-ref.html new file mode 100644 index 0000000000..d9d64e31d4 --- /dev/null +++ b/layout/reftests/generated-content/table-ignoring-whitespace-01-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +div { border:1px solid green; margin:5px; } +</style> +</head> + +<body> +<div> + <table><tbody><tr><td>Cell0</td><td></td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +<div> + <table><tbody><tr><td></td><td>Cell0</td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +<div> + <table><tbody><tr><td></td><td>Cell0</td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +<div> + <table><tbody><tr><td></td><td>Cell0</td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +</body> +</html> diff --git a/layout/reftests/generated-content/table-ignoring-whitespace-01.html b/layout/reftests/generated-content/table-ignoring-whitespace-01.html new file mode 100644 index 0000000000..67700d2959 --- /dev/null +++ b/layout/reftests/generated-content/table-ignoring-whitespace-01.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/> + <meta name="flags" content="" /> +<style> +.gen0::before { + padding:1px; +} +.gen1::before { + content: " "; +} +.gen2::before { + content: attr(missing); +} +.gen3::before { + content: url(missing-image.png); +} + +div { border:1px solid green; margin:5px; } +</style> +</head> + +<!-- This tests that generated content items that evaluate to empty strings or + broken images are *not* treated as whitespace text and ignored by the table. + Altogether missing content should be ignored, though. (In fact it won't even be generated.) --> + +<body> +<div> + <table><tbody><tr class="gen0"><td>Cell0</td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +<div> + <table><tbody><tr class="gen1"><td>Cell0</td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +<div> + <table><tbody><tr class="gen2"><td>Cell0</td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +<div> + <table><tbody><tr class="gen3"><td>Cell0</td></tr> + <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table> +</div> +</body> +</html> diff --git a/layout/reftests/generated-content/table-parts-01-ref.html b/layout/reftests/generated-content/table-parts-01-ref.html new file mode 100644 index 0000000000..d5cf10a2da --- /dev/null +++ b/layout/reftests/generated-content/table-parts-01-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +table { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; } + +table { border:1px solid blue; } +td.real { border:1px solid cyan; } +td { border-spacing:0; padding:0; } + +.table { display:table; } +.row { display:table-row; } +.rowgroup { display:table-row-group; } + +div { border:1px solid green; margin:5px; } +div.cell { border:none; display:table-cell; } +div.real { display:table-cell; } + +.tall { height:100px; } + +.yellow { background:yellow; } +.orange { background:orange; } +.brown { background:brown; } +</style> +</head> + +<body> +<table style="border:none" width="100%"><tr><td style="border:none" valign="top"> + <div><table><tbody><tr><td>1<img src="square-outline-32x32.png">"Before gen</td +><td class="real">Inner</td><td>2<img src="square-outline-32x32.png">After gen"</td +></tr></tbody></table></div> + <div><table><tbody><tr><td>1<img src="square-outline-32x32.png">"Before gen</td +></tr><tr><td class="real">Inner</td></tr><tr><td>2<img src="square-outline-32x32.png">After gen"</td +></tr></tbody></table></div> + <div><table><tbody><tr><td>1<img src="square-outline-32x32.png">"Before gen</td +></tr><tr><td>2<img src="square-outline-32x32.png">After gen"</td +></tr><tr><td class="real">Inner</td></tr></tbody></table></div> + <div><table><tbody><tr><td class="real">Inner</td></tr></tbody></table></div> + <div><table><tbody><tr><td>2<img src="square-outline-32x32.png">After gen headfoot"</td +></tr><tr><td class="real">Inner</td></tr><tr><td>1<img src="square-outline-32x32.png">"Before gen headfoot</td +></tr></tbody></table></div> + <div><div class="table tall"><div class="cell yellow">1<img src="square-outline-32x32.png">"Before gen table gencell varyheight</div +><div class="real orange">Inner</div><div class="cell brown">2<img src="square-outline-32x32.png">After gen table gencell varyheight"</div +></div></div> + <div><div><div class="table tall" style="border:none; margin:0;"><div class="cell yellow">1<img src="square-outline-32x32.png">"Before gen gencell varyheight</div +><div class="real orange">Inner</div><div class="cell brown">2<img src="square-outline-32x32.png">After gen gencell varyheight"</div +></div></div></div> + <div><div><div class="table" style="border:none; margin:0;"><div class="row yellow">1<img src="square-outline-32x32.png">"Before gen genrow varywidth</div +><div class="row orange">Inner</div><div class="row brown">2<img src="square-outline-32x32.png">After gen genrow varywidth"</div +></div></div></div> +</td><td style="border:none" valign="top"> + <div><div class="row"><div class="cell">1<img src="square-outline-32x32.png">"Before gen row gencell</div +><div class="real">Inner</div><div class="cell">2<img src="square-outline-32x32.png">After gen row gencell"</div +></div></div> + <div><div class="row"><div class="cell">1<img src="square-outline-32x32.png">"Before gen row genblock</div +><div class="real">Inner</div><div class="cell">2<img src="square-outline-32x32.png">After gen row genblock"</div +></div></div> + <div><div class="row"><div class="cell">1<img src="square-outline-32x32.png">"Before gen row geninline</div +><div class="real">Inner</div><div class="cell">2<img src="square-outline-32x32.png">After gen row geninline"</div +></div></div> + <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup genrow</div +><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup genrow"</div +></div></div> + <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup gencell</div +><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup gencell"</div +></div></div> + <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup genblock</div +><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup genblock"</div +></div></div> + <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup geninline</div +><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup geninline"</div +></div></div> +</tr></td></table> +</body> +</html> diff --git a/layout/reftests/generated-content/table-parts-01.html b/layout/reftests/generated-content/table-parts-01.html new file mode 100644 index 0000000000..3ce9328e0e --- /dev/null +++ b/layout/reftests/generated-content/table-parts-01.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS 2.1 Test Suite: generated content</title> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/> + <meta name="flags" content="" /> +<style> +table, div.gen { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; } + +.gen::before { + content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class); + counter-increment:ctr; +} +.gen::after { + content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote; + counter-increment:ctr; +} + +table { border:1px solid blue; } +td { border:1px solid cyan; } +td { border-spacing:0; padding:0; } + +tr.gen::before, tr.gen::after { display:table-cell; } +tbody.gen::before, tbody.gen::after { display:table-row; } +table.gen::before, table.gen::after { display:table-row-group; } +table.col::before, table.gen.col::after { display:table-column-group; } +/* note reordering here! */ +table.headfoot::after { display:table-header-group; } +table.headfoot::before { display:table-footer-group; } + +.cell { display:table-cell; } +.row { display:table-row; } +.rowgroup { display:table-row-group; } +.table { display:table; } +div.gencell::before, div.gencell::after { display:table-cell; } +div.genrow::before, div.genrow::after { display:table-row; } +div.genblock::before, div.genblock::after { display:block; } +div.geninline::before, div.geninline::after { display:inline; } + +div { border:1px solid green; margin:5px; } + +.varyheight::before { height:100px; background:yellow; } +.varyheight > div { height:80px; background:orange; } +.varyheight::after { height:60px; background:brown; } + +.varywidth::before { background:yellow; } +.varywidth > div { background:orange; } +.varywidth::after { background:brown; } +</style> +</head> + +<body> +<table style="border:none" width="100%"><tr><td style="border:none" valign="top"> + <div><table><tbody><tr class="gen"><td>Inner</td></tr></tbody></table></div> + <div><table><tbody class="gen"><tr><td>Inner</td></tr></tbody></table></div> + <div><table class="gen"><tfoot><tr><td>Inner</td></tr></tfoot></table></div> + <div><table class="gen col"><tbody><tr><td>Inner</td></tr></tbody></table></div> + <div><table class="gen headfoot"><tbody><tr><td>Inner</td></tr></tbody></table></div> + <div><div class="gen table gencell varyheight"><div class="cell">Inner</div></div></div> + <div><div class="gen gencell varyheight"><div class="cell">Inner</div></div></div> + <div><div class="gen genrow varywidth"><div class="row">Inner</div></div></div> +</td><td style="border:none" valign="top"> + <div><div class="gen row gencell"><div class="cell">Inner</div></div></div> + <div><div class="gen row genblock"><div class="cell">Inner</div></div></div> + <div><div class="gen row geninline"><div class="cell">Inner</div></div></div> + <div><div class="gen rowgroup genrow"><div class="row"><div class="cell">Inner</div></div></div></div> + <div><div class="gen rowgroup gencell"><div class="row"><div class="cell">Inner</div></div></div></div> + <div><div class="gen rowgroup genblock"><div class="row"><div class="cell">Inner</div></div></div></div> + <div><div class="gen rowgroup geninline"><div class="row"><div class="cell">Inner</div></div></div></div> +</tr></td></table> +</body> +</html> diff --git a/layout/reftests/generated-content/transitive-style-invalidation-ref.html b/layout/reftests/generated-content/transitive-style-invalidation-ref.html new file mode 100644 index 0000000000..cf2f709149 --- /dev/null +++ b/layout/reftests/generated-content/transitive-style-invalidation-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<style> +.foo > div::before { + display: block; + width: 100px; + height: 100px; + background: green; + content: ""; +} +</style> +<div class="foo"> + <div> + </div> +</div> +<script> +onload = function() { + document.querySelector('.foo').className = 'foo bar'; +} +</script> diff --git a/layout/reftests/generated-content/transitive-style-invalidation.html b/layout/reftests/generated-content/transitive-style-invalidation.html new file mode 100644 index 0000000000..7972b6ea45 --- /dev/null +++ b/layout/reftests/generated-content/transitive-style-invalidation.html @@ -0,0 +1,22 @@ +<!doctype html> +<style> +.foo > div::before { + display: block; + width: 100px; + height: 100px; + background: red; + content: ""; +} +.foo.bar > div::before { + background: green; +} +</style> +<div class="foo"> + <div> + </div> +</div> +<script> +onload = function() { + document.querySelector('.foo').className = 'foo bar'; +} +</script> |
