45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
.parent {
|
|
display: -webkit-flex;
|
|
justify-items: unsafe flex-end;
|
|
align-items: safe flex-start;
|
|
}
|
|
.parent .child {
|
|
display: -webkit-flex;
|
|
justify-self: unsafe flex-end;
|
|
align-self: safe flex-start;
|
|
}
|
|
#parentId {
|
|
justify-items: center;
|
|
align-items: stretch;
|
|
}
|
|
#parentId .child {
|
|
justify-self: center;
|
|
align-self: stretch;
|
|
}
|
|
</style>
|
|
<script src="../resources/js-test.js"></script>
|
|
<div class="parent">
|
|
<div id="childOfDefaultParent" class="child"></div>
|
|
</div>
|
|
<div id="parentId" class="parent">
|
|
<div id="childOfParentId" class="child"></div>
|
|
</div>
|
|
<script src="resources/alignment-parsing-utils.js"></script>
|
|
<script>
|
|
description('Test overwriting justify-self and align-self works as expected');
|
|
|
|
var parent = document.getElementById("parentId");
|
|
shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('justify-items')", "center");
|
|
shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('align-items')", "stretch");
|
|
|
|
var childOfDefaultParent = document.getElementById("childOfDefaultParent");
|
|
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self')", "unsafe flex-end");
|
|
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self')", "safe flex-start");
|
|
|
|
var childOfParentId = document.getElementById("childOfParentId");
|
|
shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-self')", "center");
|
|
shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('align-self')", "stretch");
|
|
</script>
|