Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 14:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Implement the aspect-ratio property for replaced elements (#32800)

Browse source 
* Add WPT tests for box-sizing with aspect-ratio

Signed-off-by: valadaptive <valadaptive@protonmail.com>

* Implement `aspect-ratio` for replaced elements

There are two regressions because we don't implement `object-fit`, and
one because we don't properly represent non-available <img>s with `alt`
attributes.

Signed-off-by: valadaptive <valadaptive@protonmail.com>

---------

Signed-off-by: valadaptive <valadaptive@protonmail.com>
This commit is contained in:
valadaptive 2024-07-24 07:40:23 -04:00 • committed by GitHub
parent e425ad0cb7
commit 60e65c175d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 314 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

14
tests/wpt/meta/MANIFEST.json vendored
View file

@ -556187,6 +556187,20 @@
]
},
"aspect-ratio": {
"box-sizing-dimensions.html": [
"126c3e30583edc1fb61ed5dab62187e64b597500",
[
null,
{}
]
],
"box-sizing-squashed.html": [
"542dabe1b5c11784257018b6352151d9940f59bf",
[
null,
{}
]
],
"fractional-aspect-ratio.html": [
"7186f35f8a2e62d6bae515ab0453c2af5041c23b",
[

12
tests/wpt/meta/css/css-sizing/aspect-ratio/box-sizing-dimensions.html.ini vendored Normal file
View file

@ -0,0 +1,12 @@
[box-sizing-dimensions.html]
[.item 5]
expected: FAIL
[.item 6]
expected: FAIL
[.item 7]
expected: FAIL
[.item 8]
expected: FAIL

18
tests/wpt/meta/css/css-sizing/aspect-ratio/box-sizing-squashed.html.ini vendored Normal file
View file

@ -0,0 +1,18 @@
[box-sizing-squashed.html]
[.item 10]
expected: FAIL
[.item 12]
expected: FAIL
[.item 13]
expected: FAIL
[.item 14]
expected: FAIL
[.item 15]
expected: FAIL
[.item 16]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/flex-aspect-ratio-015.html.ini vendored
View file

@ -1,2 +0,0 @@
[flex-aspect-ratio-015.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/flex-aspect-ratio-016.html.ini vendored
View file

@ -1,2 +0,0 @@
[flex-aspect-ratio-016.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/grid-aspect-ratio-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-aspect-ratio-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/grid-aspect-ratio-004.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-aspect-ratio-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-001.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-001.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-002.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-009.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-009.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-012.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-012.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-024.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[replaced-element-024.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-025.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-025.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-026.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[replaced-element-026.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-027.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-027.html]
expected: FAIL

3
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-028.html.ini vendored Normal file
View file

@ -0,0 +1,3 @@
[replaced-element-028.html]
[CSS aspect-ratio: img]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-031.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-031.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-032.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-032.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-033.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-033.html]
expected: FAIL

6
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-036.html.ini vendored
View file

@ -1,6 +0,0 @@
[replaced-element-036.html]
[display:block img should be 200px high]
expected: FAIL
[display:inline-block img should be 200px high]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-dynamic-aspect-ratio.html.ini vendored
View file

@ -1,2 +0,0 @@
[replaced-element-dynamic-aspect-ratio.html]
expected: FAIL

51
tests/wpt/tests/css/css-sizing/aspect-ratio/box-sizing-dimensions.html vendored Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS aspect-ratio: uses content box when "auto" is present and box-sizing dimensions when it is absent</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<meta name="assert" content='CSS aspect-ratio: uses content box when "auto" is present and box-sizing dimensions when it is absent.'>
<style>
img {
border: 20px solid blue;
width: 100px;
height: auto;
}
.aspect {
aspect-ratio: 2 / 1;
}
.aspect-auto {
aspect-ratio: auto 2 / 1;
}
.border-box {
box-sizing: border-box;
}
.non-replaced {
background: green;
border: 20px solid blue;
width: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.item')">
<img class="item aspect" src="./support/20x50-green.png" width="20" height="50" data-expected-width="140" data-expected-height="90">
<img class="item aspect border-box" src="./support/20x50-green.png" width="20" height="50" data-expected-width="100" data-expected-height="50">
<img class="item aspect-auto" src="./support/20x50-green.png" width="20" height="50" data-expected-width="140" data-expected-height="290">
<img class="item aspect-auto border-box" src="./support/20x50-green.png" width="20" height="50" data-expected-width="100" data-expected-height="190">
<div class="item non-replaced aspect" data-expected-width="140" data-expected-height="90"></div>
<div class="item non-replaced aspect border-box" data-expected-width="100" data-expected-height="50"></div>
<div class="item non-replaced aspect-auto" data-expected-width="140" data-expected-height="90"></div>
<div class="item non-replaced aspect-auto border-box" data-expected-width="100" data-expected-height="70"></div>

62
tests/wpt/tests/css/css-sizing/aspect-ratio/box-sizing-squashed.html vendored Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS aspect-ratio: correct ratio maintained when box-sizing: border-box and one axis is clamped to 0</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<meta name="assert" content='CSS aspect-ratio: correct ratio maintained when box-sizing: border-box and one axis is clamped to 0.'>
<style>
.item {
box-sizing: border-box;
border: 20px solid blue;
}
.horizontal {
aspect-ratio: 2 / 1;
}
.vertical {
aspect-ratio: 1 / 2;
}
.non-replaced {
background: green;
/* Break the items apart to make them individually distinguishable */
margin-bottom: 10px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.item')">
<img class="item horizontal" style="width: 50px; height: auto" src="./support/20x50-green.png" width="20" height="50" data-expected-width="50" data-expected-height="40">
<img class="item horizontal" style="width: auto; height: 20px" src="./support/20x50-green.png" width="20" height="50" data-expected-width="80" data-expected-height="40">
<img class="item horizontal" style="max-width: 50px; height: auto" src="./support/20x50-green.png" width="20" height="50" data-expected-width="40" data-expected-height="40">
<img class="item horizontal" style="width: auto; max-height: 20px" src="./support/20x50-green.png" width="20" height="50" data-expected-width="80" data-expected-height="40">
<img class="item vertical" style="height: 50px; width: auto" src="./support/20x50-green.png" width="20" height="50" data-expected-width="40" data-expected-height="50">
<img class="item vertical" style="height: auto; width: 20px" src="./support/20x50-green.png" width="20" height="50" data-expected-width="40" data-expected-height="80">
<img class="item vertical" style="max-height: 50px; width: auto" src="./support/20x50-green.png" width="20" height="50" data-expected-width="40" data-expected-height="50">
<img class="item vertical" style="height: auto; max-width: 20px" src="./support/20x50-green.png" width="20" height="50" data-expected-width="40" data-expected-height="80">
<div class="non-replaced item horizontal" style="width: 50px; height: auto" width="20" height="50" data-expected-width="50" data-expected-height="40"></div>
<div class="non-replaced item horizontal" style="width: auto; height: 20px" width="20" height="50" data-expected-width="80" data-expected-height="40"></div>
<div class="non-replaced item horizontal" style="max-width: 50px; height: auto" width="20" height="50" data-expected-width="50" data-expected-height="40"></div>
<div class="non-replaced item horizontal" style="width: auto; max-height: 20px" width="20" height="50" data-expected-width="80" data-expected-height="40"></div>
<div class="non-replaced item vertical" style="height: 50px; width: auto" width="20" height="50" data-expected-width="40" data-expected-height="50"></div>
<div class="non-replaced item vertical" style="height: auto; width: 20px" width="20" height="50" data-expected-width="40" data-expected-height="80"></div>
<div class="non-replaced item vertical" style="max-height: 50px; width: auto" width="20" height="50" data-expected-width="40" data-expected-height="50"></div>
<div class="non-replaced item vertical" style="height: auto; max-width: 20px" width="20" height="50" data-expected-width="40" data-expected-height="80"></div>