third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html - Issue 1309513008: [css-grid] Implement grid gutters

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html

Issue 1309513008: [css-grid] Implement grid gutters (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Patch for landing v3 Created 5 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt » ('j') | third_party/WebKit/Source/core/css/CSSProperties.in » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <link href="resources/grid.css" rel="stylesheet">

	5 <style>

	6 .gridGap { grid-gap: 25px; }

	7 .gridNormalGap { grid-gap: normal; }

	8 .gridColumnGap { grid-column-gap: 2vw; }

	9 .gridRowGap { grid-row-gap: 2em; }

	10 .gridRowColumnGaps {

	11 grid-row-gap: 12px;

	12 grid-column-gap: 1rem;

	13 }

	14 .gridRowColumnInheritGaps {

	15 grid-row-gap: inherit;

	16 grid-column-gap: inherit;

	17 }

	18 .gridRowColumnInitialGaps {

	19 grid-row-gap: initial;

	20 grid-column-gap: initial;

	21 }

	22 .gridCalcGaps {

	23 grid-row-gap: calc(10px + 3px);

	24 grid-column-gap: calc(2px + 1vw);

	25 }

	26 .gridInvalidRowGap { grid-row-gap: 10%; }

	27 .gridInvalidColumnGap { grid-column-gap: -webkit-max-content; }

	28 .gridInvalidMultipleRowColumnGaps {

	29 grid-row-gap: 10px 1px;

	30 grid-column-gap: 0px 0px 0px;

	31 }

	32 .gridInvalidLengthRowColumnGaps {

	33 grid-row-gap: 2dpi;

	34 grid-column-gap: 3rad;

	35 }

	36 .gridInvalidGridGap { grid-gap: 20px 20px 10px; }

	37 .gridInvalidNoneGap { grid-gap: none; }

	38 .gridInvalidImplicitGridGap { grid-gap: -webkit-fit-content; }

	39

	40 </style>

	41 <script src="../../resources/js-test.js"></script>

	42 </head>

	43 <body>

	44

	45 <div class="grid" id="defaultGrid"></div>

	46 <div class="grid gridGap" id="gridGap"></div>

	47 <div class="grid normalGap" id="normalGap"></div>

	48 <div class="grid gridColumnGap" id="gridColumnGap"></div>

	49 <div class="grid gridRowGap" id="gridRowGap"></div>

	50 <div class="grid gridCalcGaps" id="gridCalcGaps"></div>

	51 <div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>

	52 <div class="grid gridGap">

	53 <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></d iv>

	54 </div>

	55 <div class="grid gridGap">

	56 <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></d iv>

	57 </div>

	58 <div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div>

	59 <div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div>

	60 <div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowCol umnGaps"></div>

	61 <div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div>

	62 <div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div>

	63 <div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></d iv>

	64 <div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnG aps"></div>

	65

	66 <script src="resources/grid-definitions-parsing-utils.js"></script>

	67 <script>

	68

	69 description('Test that setting and getting grid-column-gap and grid-row-gap work s as expected');

	70

	71 debug("Test getting grid-column-gap and grid-row-gap set through CSS");

	72

	73 testGridGapDefinitionsValues("defaultGrid", "0px", "0px");

	74 testGridGapDefinitionsValues("normalGap", "0px", "0px");

	75 testGridGapDefinitionsValues("gridGap", "25px", "25px");

	76 testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");

	77 testGridGapDefinitionsValues("gridRowGap", "32px", "0px");

	78 testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px");

	79 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");

	80 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");

	81 testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");

	82 testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");

	83

	84 debug("");

	85 debug("Test getting wrong values for grid-column-gap and grid-row-gap set throug h CSS");

	86 testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px");

	87 testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px");

	88 testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px");

	89 testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px");

	90 testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px");

	91 testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px");

	92 testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px");

	93

	94 </script>

	95 </body>

	96 </html>

OLD	NEW