mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision e87f38097902e16348d4e17f4fe3bc2d0112bff1
This commit is contained in:
WPT Sync Bot
parent
2f8fa32e91
commit
db5631a086
381 changed files with 11610 additions and 4232 deletions
|
|
@ -11,6 +11,7 @@
|
|||
#columnGapVw { column-gap: 2vw; }
|
||||
#columnGapPercent { column-gap: 15%; }
|
||||
#columnGapCalc { column-gap: calc(10px + 4px); }
|
||||
#columnGapCalcFixedPercent { column-gap: calc(5px + 10%); }
|
||||
.columnGapInitial { column-gap: initial; }
|
||||
.columnGapInherit { column-gap: inherit; }
|
||||
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
<div id="columnGapVw"></div>
|
||||
<div id="columnGapPercent"></div>
|
||||
<div id="columnGapCalc"></div>
|
||||
<div id="columnGapCalcFixedPercent"></div>
|
||||
<div id="columnGapInitial" class="columnGapInitial"></div>
|
||||
<div class="columnGapPx">
|
||||
<div id="columnGapInitialPx" class="columnGapInitial"></div>
|
||||
|
|
@ -81,6 +83,11 @@
|
|||
var target = document.getElementById("columnGapCalc");
|
||||
assert_equals(getComputedStyle(target).columnGap, "14px");
|
||||
}, "column-gap accepts calc()");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapCalcFixedPercent");
|
||||
assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
|
||||
}, "column-gap accepts calc() mixing fixed and percentage values");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapInitial");
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
#gapPercent { gap: 15%; }
|
||||
#gapPercentTwo { gap: 15% 10%; }
|
||||
#gapCalc { gap: calc(10px + 4px); }
|
||||
#gapCalcFixedPercent { gap: calc(5px + 10%); }
|
||||
#gapCalcTwo { gap: calc(10px + 4px) calc(20px - 8px); }
|
||||
.gapInitial { gap: initial; }
|
||||
.gapInherit { gap: inherit; }
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
<div id="gapPercent"></div>
|
||||
<div id="gapPercentTwo"></div>
|
||||
<div id="gapCalc"></div>
|
||||
<div id="gapCalcFixedPercent"></div>
|
||||
<div id="gapCalcTwo"></div>
|
||||
<div id="gapInitial" class="gapInitial"></div>
|
||||
<div class="gapPx">
|
||||
|
|
@ -135,6 +137,12 @@
|
|||
assert_equals(getComputedStyle(target).rowGap, "14px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "14px");
|
||||
}, "gap accepts calc()");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapCalcFixedPercent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
|
||||
assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
|
||||
}, "gap accepts calc() mixing fixed and percentage values");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapCalcTwo");
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Test: column-gap parsing</title>
|
||||
<title>CSS Box Alignment Test: grid-column-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/#gap-legacy">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.columnGapPx { column-gap: 12px; }
|
||||
#columnGapEm { column-gap: 2em; font: 10px/1 Monospace; }
|
||||
#columnGapVw { column-gap: 2vw; }
|
||||
#columnGapPercent { column-gap: 15%; }
|
||||
#columnGapCalc { column-gap: calc(10px + 4px); }
|
||||
.columnGapInitial { column-gap: initial; }
|
||||
.columnGapInherit { column-gap: inherit; }
|
||||
.columnGapPx { grid-column-gap: 12px; }
|
||||
#columnGapEm { grid-column-gap: 2em; font: 10px/1 Monospace; }
|
||||
#columnGapVw { grid-column-gap: 2vw; }
|
||||
#columnGapPercent { grid-column-gap: 15%; }
|
||||
#columnGapCalc { grid-column-gap: calc(10px + 4px); }
|
||||
#columnGapCalcFixedPercent { grid-column-gap: calc(5px + 10%); }
|
||||
.columnGapInitial { grid-column-gap: initial; }
|
||||
.columnGapInherit { grid-column-gap: inherit; }
|
||||
|
||||
#invalidColumnGapNegative { column-gap: -10px; }
|
||||
#invalidColumnGapMaxContent { column-gap: max-content; }
|
||||
#invalidColumnGapNone { column-gap: none; }
|
||||
#invalidColumnGapMultiple { column-gap: 10px 1px; }
|
||||
#invalidColumnGapAngle { column-gap: 3rad; }
|
||||
#invalidColumnGapResolution { column-gap: 2dpi; }
|
||||
#invalidColumnGapTime { column-gap: 200ms; }
|
||||
#invalidColumnGapNegative { grid-column-gap: -10px; }
|
||||
#invalidColumnGapMaxContent { grid-column-gap: max-content; }
|
||||
#invalidColumnGapNone { grid-column-gap: none; }
|
||||
#invalidColumnGapMultiple { grid-column-gap: 10px 1px; }
|
||||
#invalidColumnGapAngle { grid-column-gap: 3rad; }
|
||||
#invalidColumnGapResolution { grid-column-gap: 2dpi; }
|
||||
#invalidColumnGapTime { grid-column-gap: 200ms; }
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
<div id="columnGapVw"></div>
|
||||
<div id="columnGapPercent"></div>
|
||||
<div id="columnGapCalc"></div>
|
||||
<div id="columnGapCalcFixedPercent"></div>
|
||||
<div id="columnGapInitial" class="columnGapInitial"></div>
|
||||
<div class="columnGapPx">
|
||||
<div id="columnGapInitialPx" class="columnGapInitial"></div>
|
||||
|
|
@ -53,91 +55,96 @@
|
|||
function(){
|
||||
var target = document.getElementById("default");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Default column-gap is 'normal'");
|
||||
}, "Default grid-column-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapPx");
|
||||
assert_equals(getComputedStyle(target).columnGap, "12px");
|
||||
}, "column-gap accepts pixels");
|
||||
}, "grid-column-gap accepts pixels");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapEm");
|
||||
assert_equals(getComputedStyle(target).columnGap, "20px");
|
||||
}, "column-gap accepts em");
|
||||
}, "grid-column-gap accepts em");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapVw");
|
||||
// The columnGap 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).columnGap, "normal");
|
||||
}, "column-gap accepts vw");
|
||||
}, "grid-column-gap accepts vw");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapPercent");
|
||||
assert_equals(getComputedStyle(target).columnGap, "15%");
|
||||
}, "column-gap accepts percentage");
|
||||
}, "grid-column-gap accepts percentage");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapCalc");
|
||||
assert_equals(getComputedStyle(target).columnGap, "14px");
|
||||
}, "column-gap accepts calc()");
|
||||
}, "grid-column-gap accepts calc()");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapCalcFixedPercent");
|
||||
assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
|
||||
}, "grid-column-gap accepts calc() mixing fixed and percentage values");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapInitial");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Initial column-gap is 'normal'");
|
||||
}, "Initial grid-column-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapInitialPx");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Initial column-gap is 'normal' 2");
|
||||
}, "Initial grid-column-gap is 'normal' 2");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapInherit");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Initial inherited column-gap is 'normal'");
|
||||
}, "Initial inherited grid-column-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("columnGapInheritPx");
|
||||
assert_equals(getComputedStyle(target).columnGap, "12px");
|
||||
}, "column-gap is inheritable");
|
||||
}, "grid-column-gap is inheritable");
|
||||
|
||||
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidColumnGapNegative");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Negative column-gap is invalid");
|
||||
}, "Negative grid-column-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidColumnGapMaxContent");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "'max-content' column-gap is invalid");
|
||||
}, "'max-content' grid-column-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidColumnGapNone");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "'none' column-gap is invalid");
|
||||
}, "'none' grid-column-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidColumnGapMultiple");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "column-gap with multiple values is invalid");
|
||||
}, "grid-column-gap with multiple values is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidColumnGapAngle");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Angle column-gap is invalid");
|
||||
}, "Angle grid-column-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidColumnGapResolution");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Resolution column-gap is invalid");
|
||||
}, "Resolution grid-column-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidColumnGapTime");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Time column-gap is invalid");
|
||||
}, "Time grid-column-gap is invalid");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
#gapPercent { grid-gap: 15%; }
|
||||
#gapPercentTwo { grid-gap: 15% 10%; }
|
||||
#gapCalc { grid-gap: calc(10px + 4px); }
|
||||
#gapCalcFixedPercent { grid-gap: calc(5px + 10%); }
|
||||
#gapCalcTwo { grid-gap: calc(10px + 4px) calc(20px - 8px); }
|
||||
.gapInitial { grid-gap: initial; }
|
||||
.gapInherit { grid-gap: inherit; }
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
<div id="gapPercent"></div>
|
||||
<div id="gapPercentTwo"></div>
|
||||
<div id="gapCalc"></div>
|
||||
<div id="gapCalcFixedPercent"></div>
|
||||
<div id="gapCalcTwo"></div>
|
||||
<div id="gapInitial" class="gapInitial"></div>
|
||||
<div class="gapPx">
|
||||
|
|
@ -70,37 +72,37 @@
|
|||
var target = document.getElementById("default");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Default gap is 'normal'");
|
||||
}, "Default grid-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapPx");
|
||||
assert_equals(getComputedStyle(target).rowGap, "12px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "12px");
|
||||
}, "gap accepts pixels");
|
||||
}, "grid-gap accepts pixels");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapPxTwo");
|
||||
assert_equals(getComputedStyle(target).rowGap, "12px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "8px");
|
||||
}, "gap accepts pixels 2");
|
||||
}, "grid-gap accepts pixels 2");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapPxPercent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "12px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "10%");
|
||||
}, "gap accepts pixels combined with percentage");
|
||||
}, "grid-gap accepts pixels combined with percentage");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapEm");
|
||||
assert_equals(getComputedStyle(target).rowGap, "20px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "20px");
|
||||
}, "gap accepts em");
|
||||
}, "grid-gap accepts em");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapEmTwo");
|
||||
assert_equals(getComputedStyle(target).rowGap, "20px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "40px");
|
||||
}, "gap accepts em 2");
|
||||
}, "grid-gap accepts em 2");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapVw");
|
||||
|
|
@ -108,7 +110,7 @@
|
|||
// in any window size we just check it's not "normal".
|
||||
assert_not_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_not_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "gap accepts vw");
|
||||
}, "grid-gap accepts vw");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapVwTwo");
|
||||
|
|
@ -116,110 +118,116 @@
|
|||
// in any window size we just check it's not "normal".
|
||||
assert_not_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_not_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "gap accepts vw and vh");
|
||||
}, "grid-gap accepts vw and vh");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapPercent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "15%");
|
||||
assert_equals(getComputedStyle(target).columnGap, "15%");
|
||||
}, "gap accepts percentage");
|
||||
}, "grid-gap accepts percentage");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapPercentTwo");
|
||||
assert_equals(getComputedStyle(target).rowGap, "15%");
|
||||
assert_equals(getComputedStyle(target).columnGap, "10%");
|
||||
}, "gap accepts percentage 2");
|
||||
}, "grid-gap accepts percentage 2");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapCalc");
|
||||
assert_equals(getComputedStyle(target).rowGap, "14px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "14px");
|
||||
}, "gap accepts calc()");
|
||||
}, "grid-gap accepts calc()");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapCalcFixedPercent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
|
||||
assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
|
||||
}, "grid-gap accepts calc() mixing fixed and percentage values");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapCalcTwo");
|
||||
assert_equals(getComputedStyle(target).rowGap, "14px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "12px");
|
||||
}, "gap accepts calc() 2");
|
||||
}, "grid-gap accepts calc() 2");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapInitial");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Initial gap is 'normal'");
|
||||
}, "Initial grid-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapInitialPx");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Initial gap is 'normal' 2");
|
||||
}, "Initial grid-gap is 'normal' 2");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapInherit");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Initial inherited gap is 'normal'");
|
||||
}, "Initial inherited grid-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("gapInheritPx");
|
||||
assert_equals(getComputedStyle(target).rowGap, "12px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "12px");
|
||||
}, "gap is inheritable");
|
||||
}, "grid-gap is inheritable");
|
||||
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapNegative");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Negative gap is invalid");
|
||||
}, "Negative grid-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapMaxContent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "'max-content' gap is invalid");
|
||||
}, "'max-content' grid-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapNone");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "'none' gap is invalid");
|
||||
}, "'none' grid-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapAngle");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Angle gap is invalid");
|
||||
}, "Angle grid-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapResolution");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Resolution gap is invalid");
|
||||
}, "Resolution grid-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapTime");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "Time gap is invalid");
|
||||
}, "Time grid-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapThree");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "gap with three values is invalid");
|
||||
}, "grid-gap with three values is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapSlash");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "gap with slash is invalid");
|
||||
}, "grid-gap with slash is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidGridGapOneWrong");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
assert_equals(getComputedStyle(target).columnGap, "normal");
|
||||
}, "gap with one wrong value is invalid");
|
||||
}, "grid-gap with one wrong value is invalid");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Test: row-gap parsing</title>
|
||||
<title>CSS Box Alignment Test: grid-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/#gap-legacy">
|
||||
<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); }
|
||||
.rowGapInitial { row-gap: initial; }
|
||||
.rowGapInherit { row-gap: inherit; }
|
||||
.rowGapPx { grid-row-gap: 12px; }
|
||||
#rowGapEm { grid-row-gap: 2em; font: 10px/1 Monospace; }
|
||||
#rowGapVw { grid-row-gap: 2vw; }
|
||||
#rowGapPercent { grid-row-gap: 15%; }
|
||||
#rowGapCalc { grid-row-gap: calc(10px + 4px); }
|
||||
#rowGapCalcFixedPercent { grid-row-gap: calc(5px + 10%); }
|
||||
.rowGapInitial { grid-row-gap: initial; }
|
||||
.rowGapInherit { grid-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; }
|
||||
#invalidRowGapNegative { grid-row-gap: -10px; }
|
||||
#invalidRowGapMaxContent { grid-row-gap: max-content; }
|
||||
#invalidRowGapNone { grid-row-gap: none; }
|
||||
#invalidRowGapMultiple { grid-row-gap: 10px 1px; }
|
||||
#invalidRowGapAngle { grid-row-gap: 3rad; }
|
||||
#invalidRowGapResolution { grid-row-gap: 2dpi; }
|
||||
#invalidRowGapTime { grid-row-gap: 200ms; }
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
<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>
|
||||
|
|
@ -53,91 +55,96 @@
|
|||
function(){
|
||||
var target = document.getElementById("default");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "Default row-gap is 'normal'");
|
||||
}, "Default grid-row-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapPx");
|
||||
assert_equals(getComputedStyle(target).rowGap, "12px");
|
||||
}, "row-gap accepts pixels");
|
||||
}, "grid-row-gap accepts pixels");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapEm");
|
||||
assert_equals(getComputedStyle(target).rowGap, "20px");
|
||||
}, "row-gap accepts em");
|
||||
}, "grid-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");
|
||||
}, "grid-row-gap accepts vw");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapPercent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "15%");
|
||||
}, "row-gap accepts percentage");
|
||||
}, "grid-row-gap accepts percentage");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapCalc");
|
||||
assert_equals(getComputedStyle(target).rowGap, "14px");
|
||||
}, "row-gap accepts calc()");
|
||||
}, "grid-row-gap accepts calc()");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapCalcFixedPercent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
|
||||
}, "grid-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'");
|
||||
}, "Initial grid-row-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapInitialPx");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "Initial row-gap is 'normal' 2");
|
||||
}, "Initial grid-row-gap is 'normal' 2");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapInherit");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "Initial inherited row-gap is 'normal'");
|
||||
}, "Initial inherited grid-row-gap is 'normal'");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapInheritPx");
|
||||
assert_equals(getComputedStyle(target).rowGap, "12px");
|
||||
}, "row-gap is inheritable");
|
||||
}, "grid-row-gap is inheritable");
|
||||
|
||||
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidRowGapNegative");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "Negative row-gap is invalid");
|
||||
}, "Negative grid-row-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidRowGapMaxContent");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "'max-content' row-gap is invalid");
|
||||
}, "'max-content' grid-row-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidRowGapNone");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "'none' row-gap is invalid");
|
||||
}, "'none' grid-row-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidRowGapMultiple");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "row-gap with multiple values is invalid");
|
||||
}, "grid-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");
|
||||
}, "Angle grid-row-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidRowGapResolution");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "Resolution row-gap is invalid");
|
||||
}, "Resolution grid-row-gap is invalid");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("invalidRowGapTime");
|
||||
assert_equals(getComputedStyle(target).rowGap, "normal");
|
||||
}, "Time row-gap is invalid");
|
||||
}, "Time grid-row-gap is invalid");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
#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; }
|
||||
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
<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>
|
||||
|
|
@ -81,6 +83,11 @@
|
|||
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(5px + 10%)");
|
||||
}, "row-gap accepts calc() mixing fixed and percentage values");
|
||||
test(
|
||||
function(){
|
||||
var target = document.getElementById("rowGapInitial");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue