mirror of
https://github.com/servo/servo.git
synced 2025-10-05 19:19:25 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
75 lines
No EOL
2.6 KiB
HTML
75 lines
No EOL
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html><head><meta charset="utf-8">
|
|
<title>CSS Display: Computed style for display:contents</title>
|
|
<link href="mailto:rune@opera.com" rel="author" title="Rune Lillesveen">
|
|
<link href="https://drafts.csswg.org/css-display-3/#valdef-display-contents" rel="help">
|
|
<link href="https://drafts.csswg.org/css-display-3/#transformations" rel="help">
|
|
<link href="https://drafts.csswg.org/cssom-1/#resolved-values" rel="help">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
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%;
|
|
}
|
|
</style>
|
|
</head><body><div class="contents" id="t1"></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 class="contents" id="t5"></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");
|
|
|
|
test(function(){
|
|
assert_equals(getComputedStyle(document.documentElement).display, "block");
|
|
}, "display:contents is blockified for root elements");
|
|
</script>
|
|
</body></html> |