Skip to content

GitLab

T
tangled
Commit f980ed60 authored by Ziran Sun's avatar Ziran Sun Committed by Commit Bot
Browse files
Options

Port two css-grid test files to WPT 

The test that fails in Chromium related to calc() serialization is due to:
https://bugs.chromium.org/p/chromium/issues/detail?id=1050968

The test that fails in Firefox related to resolving percentage grid rows is due to:
https://bugzilla.mozilla.org/show_bug.cgi?id=1481876

BUG=767015

R=jfernandez@igalia.com


Change-Id: Ie219396d0e62181056ddf6c84b7b60f8251aeb43
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2436821
Commit-Queue: Ziran Sun <zsun@igalia.com>
Reviewed-by: default avatarOriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#823932}
parent 04827dda
Expand all Show whitespace changes
Inline Side-by-side
Showing with 753 additions and 547 deletions
third_party/blink/web_tests/TestExpectations
View file @ f980ed60
......@@ -3971,6 +3971,8 @@ crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/layout-algori
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/layout-algorithm/grid-percent-rows-filled-shrinkwrap-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/layout-algorithm/grid-percent-rows-spanned-shrinkwrap-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/layout-algorithm/grid-stretch-respects-min-size-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/parsing/grid-content-sized-columns-resolution.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/parsing/grid-template-columns-computed-withcontent.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/parsing/grid-template-columns-computed.html [ Failure ]
......@@ -4002,9 +4004,7 @@ crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-auto-columns-
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-auto-columns-rows-update.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-auto-flow-resolution.html [ Failure Crash ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-auto-repeat-huge-grid.html [ Failure Crash ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-columns-rows-get-set.html [ Failure Crash ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-content-sized-columns-resolution.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-element-auto-repeat-get-set.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-element-border-grid-item.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/grid-element-border-padding-grid-item.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-columns-rows-get-set-multiple-expected.txt 0 → 100644
View file @ f980ed60
This is a testharness.js-based test.
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFixedElement' : grid-template-columns = '7px 11px', grid-template-rows = '17px 2px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentElement' : grid-template-columns = '400px 800px', grid-template-rows = '150px 450px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentWithoutSize' : grid-template-columns = '3.5px 7px', grid-template-rows = '4px 12px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoElement' : grid-template-columns = '0px 17px', grid-template-rows = '0px 3px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithEMElement' : grid-template-columns = '100px 120px', grid-template-rows = '150px 170px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithThreeItems' : grid-template-columns = '15px 0px 100px', grid-template-rows = '120px 18px 0px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFitContentAndFitAvailable' : grid-template-columns = 'none', grid-template-rows = 'none'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContent' : grid-template-columns = '0px 0px', grid-template-rows = '0px 0px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContentWithChildrenElement' : grid-template-columns = '7px 17px', grid-template-rows = '16px 3px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndFixed' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndMinMaxContent' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionFraction' : grid-template-columns = '320px 480px', grid-template-rows = '225px 375px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionMinMax' : grid-template-columns = '45px 755px', grid-template-rows = '586px 14px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcCalc' : grid-template-columns = '200px 100px', grid-template-rows = '150px 75px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndFixed' : grid-template-columns = '400px 80px', grid-template-rows = '88px 150px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndMinMax' : grid-template-columns = '190px 80px', grid-template-rows = '150px 53px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcInsideMinMax' : grid-template-columns = '400px 120px', grid-template-rows = '150px 175px'
PASS Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoInsideMinMax' : grid-template-columns = '0px 30px', grid-template-rows = '132px 60px'
PASS Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '18px 22px', element.style.gridTemplateColumns = '18px 22px', grid-template-rows = '66px 70px', element.style.gridTemplateRows = '66px 70px'
PASS Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '440px 640px', element.style.gridTemplateColumns = '55% 80%', grid-template-rows = '240px 378px', element.style.gridTemplateRows = '40% 63%'
PASS Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '0px 0px', element.style.gridTemplateColumns = 'auto auto', grid-template-rows = '0px 0px', element.style.gridTemplateRows = 'auto auto'
PASS Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '0px 160px 22px', element.style.gridTemplateColumns = 'auto 16em 22px', grid-template-rows = '336px 100px 0px', element.style.gridTemplateRows = '56% 10em auto'
PASS Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '160px 20px', element.style.gridTemplateColumns = '16em minmax(16px, 20px)', grid-template-rows = '90px 0px', element.style.gridTemplateRows = 'minmax(10%, 15%) auto'
PASS Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '160px 640px', element.style.gridTemplateColumns = '16em 2fr', grid-template-rows = '600px 0px', element.style.gridTemplateRows = '14fr auto'
PASS Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '25px 20px', element.style.gridTemplateColumns = 'calc(25px) calc(2em)', grid-template-rows = '0px 60px', element.style.gridTemplateRows = 'auto calc(10%)'
FAIL Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '345px 92px', element.style.gridTemplateColumns = 'calc(25px + 40%) minmax(min-content, calc(10% + 12px))', grid-template-rows = '100px 0px', element.style.gridTemplateRows = 'minmax(calc(75% - 350px), max-content) auto' assert_equals: expected "calc(40% + 25px) minmax(min-content, calc(10% + 12px))" but got "calc(25px + 40%) minmax(min-content, calc(10% + 12px))"
PASS Test setting wrong/invalid values through CSS
PASS Test setting bad JS values: grid-template-columns = 'none auto', grid-template-rows = 'none auto'
PASS Test setting bad JS values: grid-template-columns = 'none 16em', grid-template-rows = 'none 56%'
PASS Test setting bad JS values: grid-template-columns = 'none none', grid-template-rows = 'none none'
PASS Test setting bad JS values: grid-template-columns = 'auto none', grid-template-rows = 'auto none'
PASS Test setting bad JS values: grid-template-columns = 'auto none 16em', grid-template-rows = 'auto 18em none'
PASS Test setting bad JS values: grid-template-columns = '-webkit-fit-content -webkit-fit-content', grid-template-rows = '-webkit-fit-available -webkit-fit-available'
PASS Test setting bad JS values: grid-template-columns = '-10px minmax(16px, 32px)', grid-template-rows = 'minmax(10%, 15%) -10vw'
PASS Test setting bad JS values: grid-template-columns = '10px minmax(16px, -1vw)', grid-template-rows = 'minmax(-1%, 15%) 10vw'
PASS Test setting bad JS values: grid-template-columns = '10px calc(16px 30px)', grid-template-rows = 'calc(25px + auto) 2em'
PASS Test setting bad JS values: grid-template-columns = 'minmax(min-content, calc() 250px', grid-template-rows = 'calc(2em('
PASS Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
PASS Test the default value
PASS Test setting grid-template-columns and grid-template-rows to 'initial' through JS
Harness: the test ran to completion.
third_party/blink/web_tests/fast/css-grid-layout/grid-content-sized-columns-resolution.html → third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-content-sized-columns-resolution.html
View file @ f980ed60
<html>
<head>
<link href="resources/grid.css" rel="stylesheet"/>
<link href="resources/grid-alignment.css" rel="stylesheet"/>
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=392200">
<link href="/css/support/grid.css" rel="stylesheet">
<link href="/css/support/alignment.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
<meta name="assert" content="Checks resolution of content sized grid columns and verifies that items are processed by ascending span to compute column breadths">
<style>
.grid {
.grid {
font: 10px/1 Ahem;
}
.gridWidth300 {
.gridWidth300 {
width: 300px;
}
.gridMinContentFixedAndAuto {
}
.gridMinContentFixedAndAuto {
grid-template-columns: minmax(min-content, 15px) auto;
}
.gridMaxContentFixedAndAuto {
}
.gridMaxContentFixedAndAuto {
grid-template-columns: minmax(max-content, 15px) auto;
}
.gridAutoAndAuto {
}
.gridAutoAndAuto {
grid-template-columns: auto auto;
}
.gridMinContentAndMinContentFixed {
}
.gridMinContentAndMinContentFixed {
grid-template-columns: min-content minmax(min-content, 30px);
}
.gridMinContentAndMaxContentFixed {
}
.gridMinContentAndMaxContentFixed {
grid-template-columns: min-content minmax(max-content, 30px);
}
.gridMaxContentAndMinContent {
}
.gridMaxContentAndMinContent {
grid-template-columns: max-content min-content;
}
.gridFixedMinContentAndMaxContent {
}
.gridFixedMinContentAndMaxContent {
grid-template-columns: minmax(10px, min-content) max-content;
}
.gridFixedMaxContentAndMinContent {
}
.gridFixedMaxContentAndMinContent {
grid-template-columns: minmax(10px, max-content) min-content;
}
.gridAutoMinContent {
}
.gridAutoMinContent {
grid-template-columns: auto min-content;
}
.gridAutoMaxContent {
}
.gridAutoMaxContent {
grid-template-columns: auto max-content;
}
.gridMaxContentAndMinContentFixed {
}
.gridMaxContentAndMinContentFixed {
grid-template-columns: max-content minmax(min-content, 35px);
}
.gridMaxContentAndMaxContentFixed {
}
.gridMaxContentAndMaxContentFixed {
grid-template-columns: max-content minmax(max-content, 35px);
}
.gridMinContentFixedAndFixedFixedAndAuto {
}
.gridMinContentFixedAndFixedFixedAndAuto {
grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto;
}
.gridAutoAndFixedFixedAndMaxContentFixed {
}
.gridAutoAndFixedFixedAndMaxContentFixed {
grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px);
}
.gridMaxContentAndMaxContentFixedAndMaxContent {
}
.gridMaxContentAndMaxContentFixedAndMaxContent {
grid-template-columns: max-content minmax(max-content, 20px) max-content;
}
.gridAutoAndMinContentFixedAndMinContent {
}
.gridAutoAndMinContentFixedAndMinContent {
grid-template-columns: auto minmax(min-content, 30px) min-content;
}
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
......@@ -105,9 +109,9 @@
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed">
<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
</div>
</div>
<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixed">
......@@ -318,11 +322,16 @@
</div>
<script>
function testGridColumnsValues(id, computedColumnValue)
{
shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
}
function testGridColumnsValues(id, computedColumnValue) {
test(function(){
var div = document.getElementById(id);
var readValue = getComputedStyle(div).gridTemplateColumns;
assert_equals(readValue, computedColumnValue);
}, `Element '${id}' grid-template-columns value computes to '${computedColumnValue}'`);
}
setup({ explicit_done: true });
document.fonts.ready.then(() => {
testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");
testGridColumnsValues("gridAutoAndAuto", "45px 45px");
testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");
......@@ -336,8 +345,7 @@
testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px");
testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px");
debug("");
debug("Check that items are processed by ascending span to compute track breadths forbidding extra space distribution.");
// Check that items are processed by ascending span to compute track breadths forbidding extra space distribution.
testGridColumnsValues("gridMinContentFixedAndAutoUnsortedConstrained", "0px 40px");
testGridColumnsValues("gridAutoAndAutoUnsortedConstrained", "10px 30px");
testGridColumnsValues("gridMinContentAndMinContentFixedUnsortedConstrained", "0px 40px");
......@@ -351,8 +359,7 @@
testGridColumnsValues("gridMaxContentAndMinContentFixedUnsortedConstrained", "50px 40px");
testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsortedConstrained", "40px 70px");
debug("");
debug("Check that items are processed by ascending span to compute track breadths allowing extra space distribution.");
// Check that items are processed by ascending span to compute track breadths allowing extra space distribution.
testGridColumnsValues("gridMinContentFixedAndAutoUnsorted", "15px 90px");
testGridColumnsValues("gridAutoAndAutoUnsorted", "60px 30px");
testGridColumnsValues("gridMinContentAndMinContentFixedUnsorted", "0px 40px");
......@@ -366,14 +373,14 @@
testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px");
testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px");
debug("");
debug("Check that only a subset of tracks grow above track limits.");
// Check that only a subset of tracks grow above track limits.
testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");
testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px");
testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 60px");
testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px");
testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px");
testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 65px");
done();
});
</script>
</body>
</html>
third_party/blink/web_tests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html deleted 100644 → 0
View file @ 04827dda
<!DOCTYPE html>
<html>
<head>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.definite {
/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
width: 800px;
height: 600px;
}
.gridItem {
grid-column: 1;
grid-row: 1;
width: 7px;
height: 16px;
}
.gridItem2 {
grid-column: 2;
grid-row: 2;
width: 17px;
height: 3px;
}
.gridWithFixed {
grid-template-columns: 7px 11px;
grid-template-rows: 17px 2px;
}
.gridWithPercent {
grid-template-columns: 50% 100%;
grid-template-rows: 25% 75%;
}
.gridWithAuto {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.gridWithEM {
grid-template-columns: 10em 12em;
grid-template-rows: 15em 17em;
font: 10px Ahem;
}
.gridWithNoneAndAuto {
grid-template-columns: none auto;
grid-template-rows: none auto;
}
.gridNoneWithAndFixed {
grid-template-columns: none 15px;
grid-template-rows: none 22px;
}
.gridWithThreeItems {
grid-template-columns: 15px auto 10em;
grid-template-rows: 12em 18px auto;
font: 10px Ahem;
}
.gridWithPercentAndViewportPercent {
grid-template-columns: 50% 15vw;
grid-template-rows: 35% 28vh;
}
.gridWithFitContentAndFitAvailable {
grid-template-columns: -webkit-content-available;
grid-template-rows: -webkit-fit-content -webkit-fit-available;
}
.gridWithMinMaxContent {
grid-template-columns: min-content max-content;
grid-template-rows: max-content min-content;
}
.gridWithMinMaxAndFixed {
grid-template-columns: minmax(45px, 30%) 15px;
grid-template-rows: 12em minmax(35%, 10px);
font: 10px Ahem;
}
.gridWithMinMaxAndMinMaxContent {
grid-template-columns: minmax(min-content, 30%) 15px;
grid-template-rows: 12em minmax(35%, max-content);
font: 10px Ahem;
}
.gridWithFractionFraction {
grid-template-columns: 2fr 3fr;
grid-template-rows: 3fr 5fr;
}
.gridWithFractionMinMax {
grid-template-columns: minmax(min-content, 45px) 2fr;
grid-template-rows: 3fr minmax(14px, max-content);
}
.gridWithCalcCalc {
grid-template-columns: calc(200px) calc(10em);
grid-template-rows: calc(15em) calc(75px);
font: 10px Ahem;
}
.gridWithCalcAndFixed {
grid-template-columns: calc(50%) 8em;
grid-template-rows: 88px calc(25%);
font: 10px Ahem;
}
.gridWithCalcAndMinMax {
grid-template-columns: calc(30px + 20%) minmax(min-content, 80px);
grid-template-rows: minmax(25%, max-content) calc(10% - 7px);
}
.gridWithCalcInsideMinMax {
grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
font: 10px Ahem;
}
.gridWithAutoInsideMinMax {
grid-template-columns: minmax(auto, min-content) 30px;
grid-template-rows: calc(100px + 2em) minmax(10%, auto);
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
<div class="gridItem"></div>
</div>
<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement">
<div class="gridItem2"></div>
</div>
<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div>
<div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
<div class="gridItem"></div>
<div class="gridItem2"></div>
</div>
<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div>
<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div>
<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script src="resources/grid-columns-rows-get-set-multiple.js"></script>
</body>
</html>
third_party/blink/web_tests/fast/css-grid-layout/grid-content-sized-columns-resolution-expected.txt deleted 100644 → 0
View file @ 04827dda
PASS window.getComputedStyle(gridMinContentFixedAndAuto, '').getPropertyValue('grid-template-columns') is "15px 75px"
PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('grid-template-columns') is "45px 45px"
PASS window.getComputedStyle(gridMinContentAndMinContentFixed, '').getPropertyValue('grid-template-columns') is "20px 30px"
PASS window.getComputedStyle(gridMaxContentAndMinContent, '').getPropertyValue('grid-template-columns') is "70px 20px"
PASS window.getComputedStyle(gridFixedMinContentAndMaxContent, '').getPropertyValue('grid-template-columns') is "10px 80px"
PASS window.getComputedStyle(gridFixedMaxContentAndMinContent, '').getPropertyValue('grid-template-columns') is "60px 30px"
PASS window.getComputedStyle(gridMinContentAndMaxContentFixed, '').getPropertyValue('grid-template-columns') is "20px 70px"
PASS window.getComputedStyle(gridMaxContentFixedAndAuto, '').getPropertyValue('grid-template-columns') is "65px 25px"
PASS window.getComputedStyle(gridAutoMinContent, '').getPropertyValue('grid-template-columns') is "70px 20px"
PASS window.getComputedStyle(gridAutoMaxContent, '').getPropertyValue('grid-template-columns') is "20px 70px"
PASS window.getComputedStyle(gridMaxContentAndMinContentFixed, '').getPropertyValue('grid-template-columns') is "70px 20px"
PASS window.getComputedStyle(gridMaxContentAndMaxContentFixed, '').getPropertyValue('grid-template-columns') is "55px 35px"
Check that items are processed by ascending span to compute track breadths forbidding extra space distribution.
PASS window.getComputedStyle(gridMinContentFixedAndAutoUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 40px"
PASS window.getComputedStyle(gridAutoAndAutoUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 30px"
PASS window.getComputedStyle(gridMinContentAndMinContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 40px"
PASS window.getComputedStyle(gridMaxContentAndMinContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 70px"
PASS window.getComputedStyle(gridFixedMinContentAndMaxContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 70px"
PASS window.getComputedStyle(gridFixedMaxContentAndMinContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 40px"
PASS window.getComputedStyle(gridMinContentAndMaxContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 90px"
PASS window.getComputedStyle(gridMaxContentFixedAndAutoUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 40px"
PASS window.getComputedStyle(gridAutoMinContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 60px"
PASS window.getComputedStyle(gridAutoMaxContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 90px"
PASS window.getComputedStyle(gridMaxContentAndMinContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "50px 40px"
PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "40px 70px"
Check that items are processed by ascending span to compute track breadths allowing extra space distribution.
PASS window.getComputedStyle(gridMinContentFixedAndAutoUnsorted, '').getPropertyValue('grid-template-columns') is "15px 90px"
PASS window.getComputedStyle(gridAutoAndAutoUnsorted, '').getPropertyValue('grid-template-columns') is "60px 30px"
PASS window.getComputedStyle(gridMinContentAndMinContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "0px 40px"
PASS window.getComputedStyle(gridMaxContentAndMinContentUnsorted, '').getPropertyValue('grid-template-columns') is "0px 70px"
PASS window.getComputedStyle(gridFixedMinContentAndMaxContentUnsorted, '').getPropertyValue('grid-template-columns') is "10px 70px"
PASS window.getComputedStyle(gridFixedMaxContentAndMinContentUnsorted, '').getPropertyValue('grid-template-columns') is "50px 40px"
PASS window.getComputedStyle(gridMinContentAndMaxContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "0px 90px"
PASS window.getComputedStyle(gridMaxContentFixedAndAutoUnsorted, '').getPropertyValue('grid-template-columns') is "15px 70px"
PASS window.getComputedStyle(gridAutoMinContentUnsorted, '').getPropertyValue('grid-template-columns') is "50px 60px"
PASS window.getComputedStyle(gridAutoMaxContentUnsorted, '').getPropertyValue('grid-template-columns') is "0px 90px"
PASS window.getComputedStyle(gridMaxContentAndMinContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "50px 40px"
PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "40px 70px"
Check that only a subset of tracks grow above track limits.
PASS window.getComputedStyle(gridMinContentFixedAndAutoAboveLimits, '').getPropertyValue('grid-template-columns') is "15px 95px"
PASS window.getComputedStyle(gridMaxContentFixedAndAutoAboveLimits, '').getPropertyValue('grid-template-columns') is "15px 135px"
PASS window.getComputedStyle(gridMinContentFixedAndFixedFixedAndAuto, '').getPropertyValue('grid-template-columns') is "20px 20px 60px"
PASS window.getComputedStyle(gridAutoAndFixedFixedAndMaxContentFixed, '').getPropertyValue('grid-template-columns') is "110px 20px 20px"
PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedAndMaxContent, '').getPropertyValue('grid-template-columns') is "70px 20px 50px"
PASS window.getComputedStyle(gridAutoAndMinContentFixedAndMinContent, '').getPropertyValue('grid-template-columns') is "55px 30px 65px"
PASS successfullyParsed is true
TEST COMPLETE
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXX
XXXX XXXX
XX XX XX
XXXX XXXX
XXX XXX
XXXXXXX
XXXXX XX
XXX
XXXXX
XXXX XXXX
X X
XXXX
XXXX XXXX
XXXX XXXX
XX XX
XXXX
XXX XXX
XX XX XX XX
XXXXXX XXXXXX
XXXX XXXX
XXX XXX
XXXXX
XXX XXX
XXXX XXXX
XXXX XXXX
XX
XXXX XXXX
XX XX XX XX
XXXXXXX
XXXX XXXX
XXXX XXXX
XXXX XXXX
XXX
XXXX XXXX
XX XX XX XX
XXXX XXXX
XXX XXX
XXXXXXX
XXXXX XX
XXX
XXXXX
XXXX XXXX
X X
XXXX
XXXX XXXX
XXXX XXXX
XX XX
XXXX
XXX XXX
XX XX XX XX
XXXXXX XXXXXX
XXXX XXXX
XXX XXX
XXXXX
XXX XXX
XXXX XXXX
XXXX XXXX
XX
XXXX XXXX
XX XX XX XX
XXXXXXX
XXXX XXXX
XXXXXXXXXXX
XXXX XXXX
XXXXXXXXXXXXXXX
XXXX XXXX
XXXXXXXXXX
XXXX XXXX
XXXXXXXXXXXXXXX
X X X
X X
XX XX XX XX XX
XX
XXXXXXXXXXXXXXX
XXX XXX
third_party/blink/web_tests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js deleted 100644 → 0
View file @ 04827dda
description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
debug("Test getting |grid-template-columns| and |grid-template-rows| set through CSS");
testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "7px 11px", "17px 2px");
testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "400px 800px", "150px 450px");
testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "3.5px 7px", "4px 12px");
testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px 17px", "0px 3px");
testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px 120px", "150px 170px");
testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px 0px 100px", "120px 18px 0px");
testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPercent"), "400px 120px", "210px 168px");
testGridDefinitionsValues(document.getElementById("gridWithFitContentAndFitAvailable"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithMinMaxContent"), "0px 0px", "0px 0px");
testGridDefinitionsValues(document.getElementById("gridWithMinMaxContentWithChildrenElement"), "7px 17px", "16px 3px");
testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndFixed"), "240px 15px", "120px 210px");
testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndMinMaxContent"), "240px 15px", "120px 210px");
testGridDefinitionsValues(document.getElementById("gridWithFractionFraction"), "320px 480px", "225px 375px");
testGridDefinitionsValues(document.getElementById("gridWithFractionMinMax"), "45px 755px", "586px 14px");
testGridDefinitionsValues(document.getElementById("gridWithCalcCalc"), "200px 100px", "150px 75px");
testGridDefinitionsValues(document.getElementById("gridWithCalcAndFixed"), "400px 80px", "88px 150px");
testGridDefinitionsValues(document.getElementById("gridWithCalcAndMinMax"), "190px 80px", "150px 53px");
testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "400px 120px", "150px 175px");
testGridDefinitionsValues(document.getElementById("gridWithAutoInsideMinMax"), "0px 30px", "132px 60px");
debug("");
debug("Test the initial value");
var element = document.createElement("div");
document.body.appendChild(element);
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
debug("");
debug("Test getting and setting grid-template-rows and grid-template-columns through JS");
testGridDefinitionsSetJSValues("18px 22px", "66px 70px");
testGridDefinitionsSetJSValues("55% 80%", "40% 63%", "440px 640px", "240px 378px");
testGridDefinitionsSetJSValues("auto auto", "auto auto", "0px 0px", "0px 0px");
testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "0px 160px 22px", "336px 100px 0px");
testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px 20px", "90px 0px");
testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px");
testGridDefinitionsSetJSValues("50% 12vw", "5% 85vh", "400px 96px", "30px 510px");
testGridDefinitionsSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)");
testGridDefinitionsSetJSValues("calc(25px + 40%) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto", "345px 92px", "100px 0px", "calc(25px + 40%) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto");
testGridDefinitionsSetJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw", "0px 16px", "90px 80px");
debug("");
debug("Test getting wrong values set from CSS");
var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns')", "'none'");
shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows')", "'none'");
var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns')", "'none'");
shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows')", "'none'");
debug("");
debug("Test setting and getting wrong values from JS");
testGridDefinitionsSetBadJSValues("none auto", "none auto");
testGridDefinitionsSetBadJSValues("none 16em", "none 56%");
testGridDefinitionsSetBadJSValues("none none", "none none");
testGridDefinitionsSetBadJSValues("auto none", "auto none");
testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none");
testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
// Negative values are not allowed.
testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");
testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw");
// Invalid expressions with calc
testGridDefinitionsSetBadJSValues("10px calc(16px 30px)", "calc(25px + auto) 2em");
testGridDefinitionsSetBadJSValues("minmax(min-content, calc() 250px", "calc(2em(");
function testInherit()
{
var parentElement = document.createElement("div");
document.body.appendChild(parentElement);
parentElement.style.display = "grid";
parentElement.style.width = "800px";
parentElement.style.height = "600px";
parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
parentElement.style.gridTemplateColumns = "50px 1fr [last]";
parentElement.style.gridTemplateRows = "2em [middle] 45px";
testGridDefinitionsValues(parentElement, "50px 750px [last]", "20px [middle] 45px");
element = document.createElement("div");
parentElement.appendChild(element);
element.style.display = "grid";
element.style.gridTemplateColumns = "inherit";
element.style.gridTemplateRows = "inherit";
testGridDefinitionsValues(element, "50px 0px [last]", "20px [middle] 45px");
document.body.removeChild(parentElement);
}
debug("");
debug("Test setting grid-template-columns and grid-template-rows to 'inherit' through JS");
testInherit();
function testInitial()
{
element = document.createElement("div");
document.body.appendChild(element);
element.style.display = "grid";
element.style.width = "800px";
element.style.height = "600px";
element.style.gridTemplateColumns = "150% [middle] 55px";
element.style.gridTemplateRows = "1fr [line] 2fr [line]";
testGridDefinitionsValues(element, "1200px [middle] 55px", "200px [line] 400px [line]");
element.style.gridTemplateColumns = "initial";
element.style.gridTemplateRows = "initial";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
document.body.removeChild(element);
}
debug("");
debug("Test setting grid-template-columns and grid-template-rows to 'initial' through JS");
testInitial();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment