Skip to content
This repository has been archived by the owner on Dec 18, 2018. It is now read-only.

Computed style tests for display:contents. #1126

Merged
merged 2 commits into from Sep 28, 2016
Merged

Computed style tests for display:contents. #1126

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
173f3e0
Computed style tests for display:contents.
Sep 12, 2016
786a795
Added level to spec drafts.
Sep 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions css-display-3/display-contents-computed-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: Computed style for display:contents</title>
<link rel="author" title="Rune Lillesveen" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<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 }

#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%;
}
</style>
<div id="t1" class="contents"></div>
<div id="t2">
<div class="contents">
<span></span>
</div>
</div>
<div id="t3">
<div class="contents">
<span></span>
</div>
</div>
<div id="t4">
<div class="contents">
<span></span>
</div>
</div>
<div id="t5" class="contents"></div>
<script>
test(function(){
assert_equals(getComputedStyle(document.querySelector("#t1")).display, "contents");
}, "Serialization of computed style value for display:contents");

test(function(){
assert_equals(getComputedStyle(document.querySelector("#t2 span")).backgroundColor, "rgb(0, 128, 0)");
}, "display:contents element as inherit parent - explicit inheritance");

test(function(){
assert_equals(getComputedStyle(document.querySelector("#t3 span")).color, "rgb(0, 128, 0)");
}, "display:contents element as inherit parent - implicit inheritance");

test(function(){
assert_equals(getComputedStyle(document.querySelector("#t4 span")).alignSelf, "baseline");
}, "align-self:auto resolution for flex item inside display:contents");

test(function(){
var computed = getComputedStyle(document.querySelector("#t5"));
assert_equals(computed.width, "auto");
assert_equals(computed.height, "50%");
assert_equals(computed.marginLeft, "25%");
assert_equals(computed.paddingTop, "10%");
}, "Resolved value should be computed value, not used value, for display:contents");
</script>