Commit 8debc2e9 authored by Rossana Monteriso's avatar Rossana Monteriso Committed by Commit Bot

Add alignment.css ref to align-content-distribution tests

This CL:

* adds a required reference to the alignment.css resource file,
that provides alignment-related CSS classes used in several test cases.
Adding this reference fixes the align-content-distribution tests.

* changes the dimension of grids having 3 rows, .verticalLR and
.stretchedGrid classes, and gives them a new value of 300px width and
400px height (by using the class .width300height400).
This way each row width is now equal to 300px/3=100px, instead of
the previous dimension of 400px/3=133,33...px. The 133,33...px dimension
was, in fact, interpreted differently in different browsers,
thus making some tests fail in WebKit and Firefox.

* removes the -expected.txt files, related to align-content-distribution
tests, that were generated when these tests were failing.

Change-Id: I404dd188e8a2275042b4ace218c78a99e3248be5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1996303Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#731689}
parent f61d9c3d
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta name="flags" content="ahem"> <meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" href="/css/support/grid.css"> <link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<style> <style>
...@@ -21,6 +22,11 @@ ...@@ -21,6 +22,11 @@
grid-auto-rows: auto; grid-auto-rows: auto;
} }
.width300height400 {
width: 300px;
height: 400px;
}
.thirdRowFirstColumn { .thirdRowFirstColumn {
background-color: green; background-color: green;
grid-column: 1; grid-column: 1;
...@@ -145,13 +151,13 @@ ...@@ -145,13 +151,13 @@
<div style="position: relative"> <div style="position: relative">
<p>direction: LTR | align-content: 'stretch'</p> <p>direction: LTR | align-content: 'stretch'</p>
<div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300"> <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR" data-expected-width="300" data-expected-height="400">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowFirstColumn" data-offset-x="267" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowSecondColumn" data-offset-x="267" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
</div> </div>
</div> </div>
...@@ -290,13 +296,13 @@ ...@@ -290,13 +296,13 @@
<div style="position: relative"> <div style="position: relative">
<p>direction: RTL | align-content: 'stretch'</p> <p>direction: RTL | align-content: 'stretch'</p>
<div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR directionRTL" data-expected-width="300" data-expected-height="400">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowFirstColumn" data-offset-x="267" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowSecondColumn" data-offset-x="267" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
</div> </div>
</div> </div>
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta name="flags" content="ahem"> <meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" href="/css/support/grid.css"> <link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<style> <style>
...@@ -21,6 +22,11 @@ ...@@ -21,6 +22,11 @@
grid-auto-rows: auto; grid-auto-rows: auto;
} }
.width300height400 {
width: 300px;
height: 400px;
}
.thirdRowFirstColumn { .thirdRowFirstColumn {
background-color: green; background-color: green;
grid-column: 1; grid-column: 1;
...@@ -145,13 +151,13 @@ ...@@ -145,13 +151,13 @@
<div style="position: relative"> <div style="position: relative">
<p>direction: LTR | align-content: 'stretch'</p> <p>direction: LTR | align-content: 'stretch'</p>
<div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300"> <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL" data-expected-width="300" data-expected-height="400">
<div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
<div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
</div> </div>
</div> </div>
...@@ -290,13 +296,13 @@ ...@@ -290,13 +296,13 @@
<div style="position: relative"> <div style="position: relative">
<p>direction: RTL | align-content: 'stretch'</p> <p>direction: RTL | align-content: 'stretch'</p>
<div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL directionRTL" data-expected-width="300" data-expected-height="400">
<div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
<div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div> <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div> <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
<div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div> <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
</div> </div>
</div> </div>
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta name="flags" content="ahem"> <meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" href="/css/support/grid.css"> <link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<style> <style>
......
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