Commit 6a8a116b authored by ecobos's avatar ecobos Committed by Commit bot

Import display: contents tests from csswg-test.

This were reviewed upstream in https://github.com/w3c/csswg-test/pull/1155

This should reduce the noise in https://codereview.chromium.org/2450093005, and
make it more manageable and straight-forward to review.

BUG=657748

Review-Url: https://codereview.chromium.org/2588093003
Cr-Commit-Position: refs/heads/master@{#439805}
parent 6ff8afb5
......@@ -2429,3 +2429,36 @@ crbug.com/664859 virtual/threaded/transitions/transition-end-event-multiple-02.h
crbug.com/664859 virtual/threaded/transitions/transition-end-event-unprefixed-02.html [ Pass Failure ]
crbug.com/664859 virtual/threaded/transitions/transition-end-event-window.html [ Pass Failure ]
# ====== Random order flaky tests end here ======
# ====== Begin of display:contents tests ======
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-flex-001-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-flex-001-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-flex-002-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-flex-002-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-flex-003-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-flex-003-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-inline-flex-001-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-inline-flex-001-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-list-001-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-list-001-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-multicol-001-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-multicol-001-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-table-001-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-table-001-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-table-002-inline.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-dynamic-table-002-none.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-flex-001.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-flex-002.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-flex-003.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-float-001.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-inline-flex-001.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-list-001.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-multicol-001.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-oof-001.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-oof-002.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-table-001.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-table-002.html [ Failure ]
crbug.com/657748 imported/csswg-test/css-display-3/display-contents-text-only-001.html [ Failure ]
# ====== End of display: contents tests ======
......@@ -20,6 +20,8 @@ imported/csswg-test/css-color-3 [ Skip ]
imported/csswg-test/css-color-4 [ Skip ]
imported/csswg-test/css-conditional-3 [ Skip ]
imported/csswg-test/css-counter-styles-3 [ Skip ]
## Owners: ecobos@igalia.com
# imported/csswg-test/css-dislay-3 [ Pass ]
imported/csswg-test/css-exclusions-1 [ Skip ]
## Owners: cbiesinger@chromium.org
# imported/csswg-test/css-flexbox-1 [ Pass ]
......
CSS Display: Computed style for display:contents
html, .contents { display: contents }
#t2 .contents { background-color: green }
#t2 span { background-color: inherit }
#t3 .contents { color: green }
#t4 { display: flex; align-items: center }
#t4 .contents { align-items: baseline }
#t4 span { align-self: auto }
#t5 {
width: auto;
height: 50%;
margin-left: 25%;
padding-top: 10%;
}
This is a testharness.js-based test.
PASS Serialization of computed style value for display:contents
PASS display:contents element as inherit parent - explicit inheritance
PASS display:contents element as inherit parent - implicit inheritance
PASS align-self:auto resolution for flex item inside display:contents
PASS Resolved value should be computed value, not used value, for display:contents
FAIL display:contents is blockified for root elements assert_equals: expected "block" but got "contents"
Harness: the test ran to completion.
......@@ -3,11 +3,12 @@
<title>CSS Display: Computed style for display:contents</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations">
<link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.contents { display: contents }
html, .contents { display: contents }
#t2 .contents { background-color: green }
#t2 span { background-color: inherit }
......@@ -66,4 +67,8 @@
assert_equals(computed.marginLeft, "25%");
assert_equals(computed.paddingTop, "10%");
}, "Resolved value should be computed value, not used value, for display:contents");
test(function(){
assert_equals(getComputedStyle(document.documentElement).display, "block");
}, "display:contents is blockified for root elements");
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<style>
.flex {
display: flex;
}
.inline {
display: inline;
}
</style>
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
<div class="flex">
P
<div>A</div>
<div class="inline">S<div>0</div></div>
S
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display 3: Display contents reattachment works well in a flex container</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-001-ref.html">
<script src="support/util.js"></script>
<style>
.flex {
display: flex;
}
.inline {
display: inline;
}
.contents {
display: contents;
border: 1px solid red;
}
</style>
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
<div class="flex">
P
<div class="contents">
<div>A</div>
</div>
<div class="contents">
<div class="inline">S<div>0</div></div>
</div>
<div class="contents">
S
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<style>
.flex {
display: flex;
}
.inline {
display: inline;
}
</style>
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
<div class="flex">
P
<div>A</div>
<div class="inline">S<div>0</div></div>
S
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display 3: Display contents reattachment works well in a flex container</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-001-ref.html">
<script src="support/util.js"></script>
<style>
.flex {
display: flex;
}
.inline {
display: inline;
}
.contents {
display: contents;
border: 1px solid red;
}
</style>
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
<div class="flex">
P
<div class="contents">
<div>A</div>
</div>
<div class="contents">
<div class="inline">S<div>0</div></div>
</div>
<div class="contents">
S
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="flex c1">
0&nbsp;
<div class="inline c1">x&nbsp;</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="c3">3</div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
<span class="c2 b">b</span>
<div class="inline c2">c</div>
<div class="inline c10"><div>10</div></div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div class="flex c1">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div class="inline"><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="flex c1">
0&nbsp;
<div class="inline c1">x&nbsp;</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="c3">3</div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
<span class="c2 b">b</span>
<div class="inline c2">c</div>
<div class="inline c10"><div>10</div></div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div class="flex c1">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div class="inline"><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="flex c1">
0&nbsp;
<div class="inline c1">x&nbsp;</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="c3">3</div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
<span class="c2 b">b</span>
<div class="inline c2">c</div>
<div class="inline c10"><div>10</div></div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div class="flex"><div class="contents c1">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div></div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="flex c1">
0&nbsp;
<div class="inline c1">x&nbsp;</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="c3">3</div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
<span class="c2 b">b</span>
<div class="inline c2">c</div>
<div class="inline c10"><div>10</div></div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div class="flex"><div class="contents c1">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div></div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="iflex"><div class="contents c2">
0
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="inline c1">1</div>
2
</div></div>
<div class="iflex"><div class="contents c2">
0<div class="inline c1">1</div>2
</div></div>
<div class="iflex c3">
0<div class="inline c2"><div class="c1">1</div></div>2
</div>
<div class="iflex c3">
<div class="inline c2">0</div><div class="inline c2"><div class="c1">1</div></div><div class="inline c2">2</div>
</div>
<div class="iflex c3">
<div class="inline">0</div>
<div class="inline"><div class="inline c1">1</div></div>
<div class="inline">2</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in inline-flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-inline-flex-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="iflex"><div class="contents c2">
0
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="contents c1">1</div>
2
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="c1">1</div>
2
</div></div>
<div class="iflex c3">
0
<div class="contents c2"><div class="c1">1</div></div>
2
</div>
<div class="iflex c3">
<div class="contents c2">0</div>
<div class="contents c2"><div class="c1">1</div></div>
<div class="contents c2">2</div>
</div>
<div class="iflex c3">
<div class="inline">0</div>
<div class="contents"><div class="inline c1">1</div></div>
<div class="inline">2</div>
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="iflex"><div class="contents c2">
0
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="inline c1">1</div>
2
</div></div>
<div class="iflex"><div class="contents c2">
0<div class="inline c1">1</div>2
</div></div>
<div class="iflex c3">
0<div class="inline c2"><div class="c1">1</div></div>2
</div>
<div class="iflex c3">
<div class="inline c2">0</div><div class="inline c2"><div class="c1">1</div></div><div class="inline c2">2</div>
</div>
<div class="iflex c3">
<div class="inline">0</div>
<div class="inline"><div class="inline c1">1</div></div>
<div class="inline">2</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in inline-flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-inline-flex-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="iflex"><div class="contents c2">
0
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="contents c1">1</div>
2
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="c1">1</div>
2
</div></div>
<div class="iflex c3">
0
<div class="contents c2"><div class="c1">1</div></div>
2
</div>
<div class="iflex c3">
<div class="contents c2">0</div>
<div class="contents c2"><div class="c1">1</div></div>
<div class="contents c2">2</div>
</div>
<div class="iflex c3">
<div class="inline">0</div>
<div class="contents"><div class="inline c1">1</div></div>
<div class="inline">2</div>
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<ul><li class="c1"><div class="inline c2">
0
<div class="inline c1">x</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="inline c3"><div class="inline">3</div></div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a<span class="b">b</span>c</div></div></div>
<div class="inline c10"><div>10</div></div>
</div></li>
</ul>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in list layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-list-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<ul><li class="c1"><div class="contents c2">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div class="inline"><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div></li></ul>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<ul><li class="c1"><div class="inline c2">
0
<div class="inline c1">x</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="inline c3"><div class="inline">3</div></div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a<span class="b">b</span>c</div></div></div>
<div class="inline c10"><div>10</div></div>
</div></li>
</ul>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in list layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-list-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<ul><li class="c1"><div class="contents c2">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div class="inline"><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div></li></ul>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents in multicolumn layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-multicol-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<div class="columns">
<div class="columns contents">
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents in multicolumn layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-multicol-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<div class="columns">
<div class="columns contents">
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(document, window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = ''; })
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="caption c2">1<span>1</span></div>
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
<div class="cell c3">3</div>
<div class="rowg c4">4</div>
<div class="cell c5">5a</div>
<div class="cell c5">5b</div>
<div class="head c6">6</div>
<div class="cell c7"><div class="inline c2">7<span class="b">a</span></div></div>
<div class="cell c8">7b</div>
<div class="foot c9">8</div>
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
<div class="cell c10">10</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-table-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="cell">3</div></div>
<div class="contents c4"><div class="rowg">4</div></div>
<div class="contents c5"><div class="cell">5a</div></div>
<div class="cell c5">5b</div>
<div class="contents c6"><div class="head">6</div></div>
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c8"><div class="cell">7b</div></div>
<div class="contents c9"><div class="foot">8</div></div>
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div class="cell">10</div></div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(
document,
window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = 'contents'; });
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="caption c2">1<span>1</span></div>
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
<div class="cell c3">3</div>
<div class="rowg c4">4</div>
<div class="cell c5">5a</div>
<div class="cell c5">5b</div>
<div class="head c6">6</div>
<div class="cell c7"><div class="inline c2">7<span class="b">a</span></div></div>
<div class="cell c8">7b</div>
<div class="foot c9">8</div>
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
<div class="cell c10">10</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-table-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="cell">3</div></div>
<div class="contents c4"><div class="rowg">4</div></div>
<div class="contents c5"><div class="cell">5a</div></div>
<div class="cell c5">5b</div>
<div class="contents c6"><div class="head">6</div></div>
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c8"><div class="cell">7b</div></div>
<div class="contents c9"><div class="foot">8</div></div>
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div class="cell">10</div></div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(
document,
window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = 'contents'; });
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="table" style="float:right">
<div class="caption c2">1<span>1</span></div>
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
<div class="cell c3" style="border:none">3</div>
<div class="rowg c4">4</div>
<div class="cell c5" style="border:none">5a</div>
<div class="cell c5">5b</div>
<div class="head c6">6</div>
<div class="cell c7" style="border:none"><div class="inline c2">7<span class="b">a</span></div></div>
<div class="cell c8" style="border:none">7b</div>
<div class="foot c9" style="border:none">8</div>
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
<div class="cell c10" style="border:none">10</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents in table layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-table-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="table" style="float:right">
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="cell">3</div></div>
<div class="contents c4"><div class="rowg">4</div></div>
<div class="contents c5"><div class="cell">5a</div></div>
<div class="cell c5">5b</div>
<div class="contents c6"><div class="head">6</div></div>
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c8"><div class="cell">7b</div></div>
<div class="contents c9"><div class="foot">8</div></div>
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div class="cell">10</div></div>
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(
document,
window,
function(e) { e.style.display = 'inline'; },
function(e) { e.style.display = 'contents'; });
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="table" style="float:right">
<div class="caption c2">1<span>1</span></div>
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
<div class="cell c3" style="border:none">3</div>
<div class="rowg c4">4</div>
<div class="cell c5" style="border:none">5a</div>
<div class="cell c5">5b</div>
<div class="head c6">6</div>
<div class="cell c7" style="border:none"><div class="inline c2">7<span class="b">a</span></div></div>
<div class="cell c8" style="border:none">7b</div>
<div class="foot c9" style="border:none">8</div>
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
<div class="cell c10" style="border:none">10</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents in table layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-table-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<script src="support/util.js"></script>
<div style="color: red">
<div class="table" style="float:right">
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="cell">3</div></div>
<div class="contents c4"><div class="rowg">4</div></div>
<div class="contents c5"><div class="cell">5a</div></div>
<div class="cell c5">5b</div>
<div class="contents c6"><div class="head">6</div></div>
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c8"><div class="cell">7b</div></div>
<div class="contents c9"><div class="foot">8</div></div>
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div class="cell">10</div></div>
</div>
</div>
<script>
window.onload = function() {
eachDisplayContentsElementIn(
document,
window,
function(e) { e.style.display = 'none'; },
function(e) { e.style.display = 'contents'; });
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<style>
.flex {
display: flex;
}
.inline {
display: inline;
}
</style>
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
<div class="flex">
P
<div>A</div>
<div class="inline">S<div>0</div></div>
S
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: display: contents inside a flex container</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-001-ref.html">
<style>
.flex {
display: flex;
}
.inline {
display: inline;
}
.contents {
display: contents;
border: 1px solid red;
}
</style>
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
<div class="flex">
P
<div class="contents">
<div>A</div>
</div>
<div class="contents">
<div class="inline">S<div>0</div></div>
</div>
<div class="contents">
S
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="flex c1">
0&nbsp;
<div class="inline c1">x&nbsp;</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="c3">3</div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
<span class="c2 b">b</span>
<div class="inline c2">c</div>
<div class="inline c10"><div>10</div></div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<div class="flex c1">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div class="inline"><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="flex c1">
0&nbsp;
<div class="inline c1">x&nbsp;</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="c3">3</div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
<span class="c2 b">b</span>
<div class="inline c2">c</div>
<div class="inline c10"><div>10</div></div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-flex-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<div class="flex"><div class="contents c1">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<p>You should see the word PASS and no red below.</p>
<div>P<span>A</span>S<span>S</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: display:contents works on floated elements</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-pass-no-red-ref.html">
<style>
div {
display: contents;
float: right;
background: red;
}
</style>
<p>You should see the word PASS and no red below.</p>
<div>P<span>A</span>S<span>S</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="iflex"><div class="contents c2">
0
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="inline c1">1</div>
2
</div></div>
<div class="iflex"><div class="contents c2">
0<div class="inline c1">1</div>2
</div></div>
<div class="iflex c3">
0<div class="inline c2"><div class="c1">1</div></div>2
</div>
<div class="iflex c3">
<div class="inline c2">0</div><div class="inline c2"><div class="c1">1</div></div><div class="inline c2">2</div>
</div>
<div class="iflex c3">
<div class="inline">0</div>
<div class="inline"><div class="inline c1">1</div></div>
<div class="inline">2</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in inline-flex layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-inline-flex-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red">
<div class="iflex"><div class="contents c2">
0
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="contents c1">1</div>
2
</div></div>
<div class="iflex"><div class="contents c2">
0
<div class="c1">1</div>
2
</div></div>
<div class="iflex c3">
0
<div class="contents c2"><div class="c1">1</div></div>
2
</div>
<div class="iflex c3">
<div class="contents c2">0</div>
<div class="contents c2"><div class="c1">1</div></div>
<div class="contents c2">2</div>
</div>
<div class="iflex c3">
<div class="inline">0</div>
<div class="contents"><div class="inline c1">1</div></div>
<div class="inline">2</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<ul><li class="c1"><div class="inline c2">
0
<div class="inline c1">x</div>
<div class="inline c1"><div class="inline c2">y</div></div>
<div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div>
<div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
<div class="inline c3"><div class="inline">3</div></div>
<div class="inline"><div class="inline c4">4</div></div>
<div><div class="inline c5">5a</div></div>
<div class="c5">5b</div>
<div class="inline c6"><div>6</div></div>
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
<div class="inline c9"><div>8</div></div>
<div class="inline c9"><div class="inline">9<div class="inline c2">a<span class="b">b</span>c</div></div></div>
<div class="inline c10"><div>10</div></div>
</div></li>
</ul>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display: contents in list layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-list-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red">
<ul><li class="c1"><div class="contents c2">
0
<div class="contents c1">x</div>
<div class="contents c1"><div class="contents c2">y</div></div>
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="inline">3</div></div>
<div class="inline"><div class="contents c4">4</div></div>
<div><div class="contents c5">5a</div></div>
<div class="c5">5b</div>
<div class="contents c6"><div>6</div></div>
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c9"><div>8</div></div>
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div>10</div></div>
</div></li></ul>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents in multicolumn layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-multicol-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red">
<div class="columns">
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
<div class="columns">
<div class="columns contents">
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
<div class="contents c2"><div>2</div></div>
<div class="contents c3"><div>3</div></div>
</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<p>You should see the word PASS and no red below.</p>
<div>P<span>A</span>S<span>S</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: display:contents works on out-of-flow positioned elements</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-pass-no-red-ref.html">
<style>
div {
display: contents;
position: absolute;
right: 0;
background: red;
}
</style>
<p>You should see the word PASS and no red below.</p>
<div>P<span>A</span>S<span>S</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<p>You should see the word PASS and no red below.</p>
<div>P<span>A</span>S<span>S</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: display:contents works on out-of-flow positioned elements</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-pass-no-red-ref.html">
<style>
div {
display: contents;
position: fixed;
right: 0;
background: red;
}
</style>
<p>You should see the word PASS and no red below.</p>
<div>P<span>A</span>S<span>S</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="caption c2">1<span>1</span></div>
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
<div class="cell c3">3</div>
<div class="rowg c4">4</div>
<div class="cell c5">5a</div>
<div class="cell c5">5b</div>
<div class="head c6">6</div>
<div class="cell c7"><div class="inline c2">7<span class="b">a</span></div></div>
<div class="cell c8">7b</div>
<div class="foot c9">8</div>
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
<div class="cell c10">10</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents in table layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-table-001-ref.html">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red">
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="cell">3</div></div>
<div class="contents c4"><div class="rowg">4</div></div>
<div class="contents c5"><div class="cell">5a</div></div>
<div class="cell c5">5b</div>
<div class="contents c6"><div class="head">6</div></div>
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c8"><div class="cell">7b</div></div>
<div class="contents c9"><div class="foot">8</div></div>
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div class="cell">10</div></div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red" class="ref">
<div class="table" style="float:right">
<div class="caption c2">1<span>1</span></div>
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
<div class="cell c3" style="border:none">3</div>
<div class="rowg c4">4</div>
<div class="cell c5" style="border:none">5a</div>
<div class="cell c5">5b</div>
<div class="head c6">6</div>
<div class="cell c7" style="border:none"><div class="inline c2">7<span class="b">a</span></div></div>
<div class="cell c8" style="border:none">7b</div>
<div class="foot c9" style="border:none">8</div>
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
<div class="cell c10" style="border:none">10</div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: CSS display:contents in table layout</title>
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-table-002-ref.html">
<link rel="stylesheet" href="support/acid.css">
<div style="color: red">
<div class="table" style="float:right">
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
<div class="contents c3"><div class="cell">3</div></div>
<div class="contents c4"><div class="rowg">4</div></div>
<div class="contents c5"><div class="cell">5a</div></div>
<div class="cell c5">5b</div>
<div class="contents c6"><div class="head">6</div></div>
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
<div class="contents c8"><div class="cell">7b</div></div>
<div class="contents c9"><div class="foot">8</div></div>
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
<div class="contents c10"><div class="cell">10</div></div>
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<style>
html, body { margin: 0; padding: 0; }
</style>
<p>Test passes if you see the word "PASS" below</p>
PASS
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: Only text on a display: contents subtree</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="match" href="display-contents-text-only-001-ref.html">
<style>
body { display: contents; }
</style>
<p>Test passes if you see the word "PASS" below</p>
PASS
html, body {
color: black;
background-color: white;
font-size: 16px;
padding: 0;
margin: 0;
}
body { color: red; }
.table {
display: table;
border-collapse: collapse;
border: blue solid 1pt;
}
.itable { display: inline-table; }
.caption { display: table-caption; }
.cell {
display: table-cell;
border: inherit;
}
.row {
display: table-row;
border: green dashed 1pt;
}
.rowg { display: table-row-group; }
.head { display: table-header-group; }
.foot { display: table-footer-group; }
.col { display: table-column; }
.colg { display: table-column-group; }
.flex { display: flex; }
.iflex { display: inline-flex; }
.li { display: list-item; }
.ib { display: inline-block; }
.inline { display: inline; }
.columns { columns: 2; height: 4em; }
.contents {
display: contents;
align-items: inherit;
justify-items:inherit;
}
.c1 { color: lime; }
.c2 { background: blue; color: pink; }
.c3 { color: teal; }
.c4 { color: green; }
.c5 { color: silver; }
.c6 { color: cyan; }
.c7 { color: magenta; }
.c8 { color: yellow; }
.c9 { color: grey; }
.c10{ color: black; }
.b { background: inherit; }
/** This is the only difference between references and non-reference styles */
.ref .c2 { background: transparent; }
.ref .b { background:blue; }
.ref div.contents { display: block; }
.ref span.contents { display: inline; }
function eachDisplayContentsElementIn(document, window, callbackDo, callbackUndo) {
var elements = [];
document.body.offsetHeight;
// NOTE: Doing qsa('*') and getComputedStyle is just for the
// test's sake, since it's easier to mess it up when
// getComputedStyle is involved.
var all = document.querySelectorAll('*');
for (var i = 0; i < all.length; ++i) {
if (window.getComputedStyle(all[i]).display === "contents") {
callbackDo(all[i]);
elements.push(all[i]);
}
}
document.body.offsetHeight;
for (var i = 0; i < elements.length; ++i)
callbackUndo(elements[i]);
document.body.offsetHeight;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment