diff options
Diffstat (limited to 'tests/wpt/css-tests/css-grid-1_dev/html/reference')
8 files changed, 158 insertions, 0 deletions
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm new file mode 100644 index 00000000000..e00b74435c6 --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> + <style type="text/css"> + div { + font: 50px/1 Ahem; + } + + #blue { + color: blue; + } + + #yellow { + color: yellow; + } + + #lime { + color: lime; + } + + #magenta { + color: magenta; + } + </style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div> + <span id="blue">B</span><span id="yellow">Y</span> + <br> + <span id="lime">L</span><span id="magenta">M</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm new file mode 100644 index 00000000000..9c7e815d68f --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> + <style type="text/css"> + #main { + position: relative; + } + + #main div { + width: 100px; + height: 100px; + } + + .blue { + background-color: blue; + position: absolute; + left: 0px; + top: 0px; + } + + .yellow { + background-color: yellow; + position: absolute; + left: 25px; + top: 25px; + } + + .green { + background-color: green; + position: absolute; + left: 50px; + top: 50px; + } + </style> + </head> + <body> + <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + + <div id="main"> + <div class="blue"></div> + <div class="yellow"></div> + <div class="green"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-first-letter-green-margin-no-collapse-ref.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-first-letter-green-margin-no-collapse-ref.htm new file mode 100644 index 00000000000..bd721eba8b2 --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-first-letter-green-margin-no-collapse-ref.htm @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Grid Layout Test: Reference file text first letter should be green and margins do not collapse</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> + <style type="text/css"> + p { + /* Prevent collapsing body and paragraph margins. */ + float: left; + } + + .green { + color: green; + } + </style> + </head> + <body> + <p> + <span class="green">T</span>he <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>. + In addition, body and paragraph margins should <strong>not collapse</strong>. + </p> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-text-green-margin-no-collapse-ref.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-text-green-margin-no-collapse-ref.htm new file mode 100644 index 00000000000..70cc6e6ec52 --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-text-green-margin-no-collapse-ref.htm @@ -0,0 +1,17 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> + <style type="text/css"> + p { + color: green; + /* Prevent collapsing body and paragraph margins. */ + float: left; + } + </style> + </head> + <body> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/100x100-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/100x100-green.png Binary files differnew file mode 100644 index 00000000000..3883542392f --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/100x100-green.png diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/200x200-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/200x200-green.png Binary files differnew file mode 100644 index 00000000000..7a47c0e5e7a --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/200x200-green.png diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/60x60-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/60x60-green.png Binary files differnew file mode 100644 index 00000000000..b3c8cf3eb4c --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/60x60-green.png diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/testing-utils.js b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/testing-utils.js new file mode 100644 index 00000000000..c4ceec3a805 --- /dev/null +++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/testing-utils.js @@ -0,0 +1,33 @@ +var TestingUtils = (function() { + + function checkGridTemplateColumns(element, value) { + assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns"); + } + + function checkGridTemplateRows(element, value) { + assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows"); + } + + function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue) { + test(function() { + var grid = document.getElementById(gridId); + grid.style.gridTemplateColumns = columnsStyle; + grid.style.gridTemplateRows = rowsStyle; + checkGridTemplateColumns(grid, columnsComputedValue); + checkGridTemplateRows(grid, rowsComputedValue); + }, "'" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";"); + } + + function testGridTemplateAreas(gridId, style, value) { + test(function() { + var grid = document.getElementById(gridId); + grid.style.gridTemplateAreas = style; + assert_equals(getComputedStyle(grid).gridTemplateAreas, value, "gridTemplateAreas"); + }, "'" + gridId + "' with: grid-template-areas: " + style + ";"); + } + + return { + testGridTemplateColumnsRows: testGridTemplateColumnsRows, + testGridTemplateAreas: testGridTemplateAreas + } +})(); |
