151 lines
5.5 KiB
HTML
151 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Box Alignment Test: row-gap parsing</title>
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
.rowGapPx { row-gap: 12px; }
|
|
#rowGapEm { row-gap: 2em; font: 10px/1 Monospace; }
|
|
#rowGapVw { row-gap: 2vw; }
|
|
#rowGapPercent { row-gap: 15%; }
|
|
#rowGapCalc { row-gap: calc(10px + 4px); }
|
|
#rowGapCalcFixedPercent { row-gap: calc(5px + 10%); }
|
|
.rowGapInitial { row-gap: initial; }
|
|
.rowGapInherit { row-gap: inherit; }
|
|
|
|
#invalidRowGapNegative { row-gap: -10px; }
|
|
#invalidRowGapMaxContent { row-gap: max-content; }
|
|
#invalidRowGapNone { row-gap: none; }
|
|
#invalidRowGapMultiple { row-gap: 10px 1px; }
|
|
#invalidRowGapAngle { row-gap: 3rad; }
|
|
#invalidRowGapResolution { row-gap: 2dpi; }
|
|
#invalidRowGapTime { row-gap: 200ms; }
|
|
</style>
|
|
<body>
|
|
<div id="log"></div>
|
|
|
|
<div id="default"></div>
|
|
<div id="rowGapPx" class="rowGapPx"></div>
|
|
<div id="rowGapEm"></div>
|
|
<div id="rowGapVw"></div>
|
|
<div id="rowGapPercent"></div>
|
|
<div id="rowGapCalc"></div>
|
|
<div id="rowGapCalcFixedPercent"></div>
|
|
<div id="rowGapInitial" class="rowGapInitial"></div>
|
|
<div class="rowGapPx">
|
|
<div id="rowGapInitialPx" class="rowGapInitial"></div>
|
|
</div>
|
|
<div id="rowGapInherit" class="rowGapInherit"></div>
|
|
<div class="rowGapPx">
|
|
<div id="rowGapInheritPx" class="rowGapInherit"></div>
|
|
</div>
|
|
|
|
<div id="invalidRowGapNegative"></div>
|
|
<div id="invalidRowGapMaxContent"></div>
|
|
<div id="invalidRowGapNone"></div>
|
|
<div id="invalidRowGapMultiple"></div>
|
|
<div id="invalidRowGapAngle"></div>
|
|
<div id="invalidRowGapResolution"></div>
|
|
<div id="invalidRowGapTime"></div>
|
|
|
|
<script>
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("default");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Default row-gap is 'normal'");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapPx");
|
|
assert_equals(getComputedStyle(target).rowGap, "12px");
|
|
}, "row-gap accepts pixels");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapEm");
|
|
assert_equals(getComputedStyle(target).rowGap, "20px");
|
|
}, "row-gap accepts em");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapVw");
|
|
// The rowGap size would depend on the viewport width, so to make the test pass
|
|
// in any window size we just check it's not "normal".
|
|
assert_not_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "row-gap accepts vw");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapPercent");
|
|
assert_equals(getComputedStyle(target).rowGap, "15%");
|
|
}, "row-gap accepts percentage");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapCalc");
|
|
assert_equals(getComputedStyle(target).rowGap, "14px");
|
|
}, "row-gap accepts calc()");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapCalcFixedPercent");
|
|
assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
|
|
}, "row-gap accepts calc() mixing fixed and percentage values");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapInitial");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Initial row-gap is 'normal'");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapInitialPx");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Initial row-gap is 'normal' 2");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapInherit");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Initial inherited row-gap is 'normal'");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("rowGapInheritPx");
|
|
assert_equals(getComputedStyle(target).rowGap, "12px");
|
|
}, "row-gap is inheritable");
|
|
|
|
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("invalidRowGapNegative");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Negative row-gap is invalid");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("invalidRowGapMaxContent");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "'max-content' row-gap is invalid");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("invalidRowGapNone");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "'none' row-gap is invalid");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("invalidRowGapMultiple");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "row-gap with multiple values is invalid");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("invalidRowGapAngle");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Angle row-gap is invalid");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("invalidRowGapResolution");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Resolution row-gap is invalid");
|
|
test(
|
|
function(){
|
|
var target = document.getElementById("invalidRowGapTime");
|
|
assert_equals(getComputedStyle(target).rowGap, "normal");
|
|
}, "Time row-gap is invalid");
|
|
</script>
|
|
</body>
|
|
|
|
|