Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 02:45:36 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 3503c50a6452e153bde906a9c6644cb6237224fc

Browse source
This commit is contained in:
WPT Sync Bot 2019-11-30 08:24:23 +00:00
parent 3db473714b
commit dc71e05859
379 changed files with 37923 additions and 5120 deletions
Download patch file Download diff file Expand all files Collapse all files

14
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-001-ref.html
View file

@ -1,14 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: unsized div</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
height: 222px;
}
</style>
<div id=target></div>

16
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-001.html
View file

@ -1,16 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: unsized div</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-001-ref.html">
<meta name="assert" content="intrinsic-size is used to size the div as if it had a single child of this size">
<style>
#target {
background: lightblue;
intrinsic-size: 111px 222px;
}
</style>
<div id=target></div>

21
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-002-ref.html
View file

@ -1,21 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: div with max-content parent</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#border {
width: max-content;
border: 1px solid black;
}
#target {
background: lightblue;
width: 111px;
height: 222px;
}
</style>
<div id=border>
<div id=target></div>
</div>

22
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-002.html
View file

@ -1,22 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: div with max-content parent</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-002-ref.html">
<meta name="assert" content="intrinsic-size is used to size the div, with parent's max-content width respecting it">
<style>
#border {
width: max-content;
border: 1px solid black;
}
#target {
background: lightblue;
intrinsic-size: 111px 222px;
}
</style>
<div id=border>
<div id=target></div>
</div>

15
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-003-ref.html
View file

@ -1,15 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: width specified</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
width: 50px;
height: 222px;
}
</style>
<div id=target></div>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-003.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: width specified</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-003-ref.html">
<meta name="assert" content="intrinsic-size's width is ignored if width is specified">
<style>
#target {
background: lightblue;
intrinsic-size: 111px 222px;
width: 50px;
}
</style>
<div id=target></div>

15
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-004-ref.html
View file

@ -1,15 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: width is min-content</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
width: 111px;
height: 222px;
}
</style>
<div id=target></div>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-004.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: width is min-content</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-004-ref.html">
<meta name="assert" content="div is sized to intrinsic-width if width is min-content">
<style>
#target {
background: lightblue;
intrinsic-size: 111px 222px;
width: min-content;
}
</style>
<div id=target></div>

15
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-005-ref.html
View file

@ -1,15 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: width is max-content</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
width: 111px;
height: 222px;
}
</style>
<div id=target></div>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-005.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: width is max-content</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-004-ref.html">
<meta name="assert" content="div is sized to intrinsic-width if width is max-content">
<style>
#target {
background: lightblue;
intrinsic-size: 111px 222px;
width: max-content;
}
</style>
<div id=target></div>

16
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-006-ref.html
View file

@ -1,16 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: unsized div, intrinsic-size is small</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
height: 6px;
contain: size;
}
</style>
<div id=target>Lorem ipsum</div>

16
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-006.html
View file

@ -1,16 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: unsized div, intrinsic-size is small</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-006-ref.html">
<meta name="assert" content="content dimensions are ignored if intrinsic-size is specified">
<style>
#target {
background: lightblue;
intrinsic-size: 5px 6px;
}
</style>
<div id=target>Lorem ipsum</div>

27
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-007-ref.html
View file

@ -1,27 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: div with border</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#border {
border: 1px solid blue;
width: max-content;
}
#target {
background: lightblue;
box-sizing: content-box;
width: 55px;
height: 66px;
border-style: solid;
border-color: black;
border-width: 2px 3px 5px 7px;
}
</style>
<div id=border>
<div id=target></div>
</div>

26
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-007.html
View file

@ -1,26 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: div with border</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-007-ref.html">
<meta name="assert" content="intrinsic-size sizes the content box, not the border box">
<style>
#border {
border: 1px solid blue;
width: max-content;
}
#target {
background: lightblue;
intrinsic-size: 55px 66px;
border-style: solid;
border-color: black;
border-width: 2px 3px 5px 7px;
}
</style>
<div id=border>
<div id=target></div>
</div>

37
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-008-ref.html
View file

@ -1,37 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: writing modes</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.border {
border: 1px solid blue;
width: max-content;
margin: 5px;
}
.box {
background: lightblue;
box-sizing: content-box;
width: 55px;
height: 66px;
border-style: solid;
border-color: black;
border-width: 2px 3px 5px 7px;
padding: 11px 13px 17px 19px;
}
.verticalrl {
writing-mode: vertical-rl;
}
.verticallr {
writing-mode: vertical-lr;
}
.horizontaltb {
writing-mode: horizontal-tb;
}
</style>
<div class=border><div class="box verticalrl">Lorem</div></div>
<div class=border><div class="box verticallr">Ipsum</div></div>
<div class=border><div class="box horizontaltb">Dolor</div></div>

37
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-008.html
View file

@ -1,37 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: writing modes</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-008-ref.html">
<meta name="assert" content="intrinsic-size specifies physical dimensions, and respects writing modes">
<style>
.border {
border: 1px solid blue;
width: max-content;
margin: 5px;
}
.box {
background: lightblue;
intrinsic-size: 55px 66px;
border-style: solid;
border-color: black;
border-width: 2px 3px 5px 7px;
padding: 11px 13px 17px 19px;
}
.verticalrl {
writing-mode: vertical-rl;
}
.verticallr {
writing-mode: vertical-lr;
}
.horizontaltb {
writing-mode: horizontal-tb;
}
</style>
<div class=border><div class="box verticalrl">Lorem</div></div>
<div class=border><div class="box verticallr">Ipsum</div></div>
<div class=border><div class="box horizontaltb">Dolor</div></div>

23
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-009-ref.html
View file

@ -1,23 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: select multiple</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.border {
border: 1px solid blue;
width: max-content;
margin: 5px;
}
select {
background: lightblue;
box-sizing: content-box;
width: 55px;
height: 66px;
overflow: visible;
}
</style>
<select multiple></select>

23
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-009.html
View file

@ -1,23 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: select multiple</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-009-ref.html">
<meta name="assert" content="intrinsic-size sizes select multiple">
<style>
.border {
border: 1px solid blue;
width: max-content;
margin: 5px;
}
select {
intrinsic-size: 55px 66px;
background: lightblue;
overflow: visible;
}
</style>
<select multiple></select>

39
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-010-ref.html
View file

@ -1,39 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex row</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#flex {
display: flex;
flex-direction: row;
width: 500px;
height: 100px;
}
.item {
border: 1px solid black;
box-sizing: content-box;
}
#one {
background: lightblue;
width: 55px;
flex-grow: 3;
}
#two {
background: lightgreen;
width: 66px;
flex-grow: 2;
}
#three {
background: lightgrey;
width: 77px;
flex-grow: 1;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

40
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-010.html
View file

@ -1,40 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex row</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-010-ref.html">
<meta name="assert" content="items are flexed correctly when they are sized by intrinsic-size in a flex row">
<style>
#flex {
display: flex;
flex-direction: row;
width: 500px;
height: 100px;
}
.item {
border: 1px solid black;
}
#one {
background: lightblue;
intrinsic-size: 55px 11px;
flex-grow: 3;
}
#two {
background: lightgreen;
intrinsic-size: 66px 22px;
flex-grow: 2;
}
#three {
background: lightgrey;
intrinsic-size: 77px 33px;
flex-grow: 1;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

39
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-011-ref.html
View file

@ -1,39 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex column</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#flex {
display: flex;
flex-direction: column;
width: 100px;
height: 200px;
}
.item {
border: 1px solid black;
box-sizing: content-box;
}
#one {
background: lightblue;
height: 11px;
flex-grow: 3;
}
#two {
background: lightgreen;
height: 22px;
flex-grow: 2;
}
#three {
background: lightgrey;
height: 33px;
flex-grow: 1;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

40
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-011.html
View file

@ -1,40 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex column</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-011-ref.html">
<meta name="assert" content="items are flexed correctly when they are sized by intrinsic-size in a flex column">
<style>
#flex {
display: flex;
flex-direction: column;
width: 100px;
height: 200px;
}
.item {
border: 1px solid black;
}
#one {
background: lightblue;
intrinsic-size: 55px 11px;
flex-grow: 3;
}
#two {
background: lightgreen;
intrinsic-size: 66px 22px;
flex-grow: 2;
}
#three {
background: lightgrey;
intrinsic-size: 77px 33px;
flex-grow: 1;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

14
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-012-ref.html
View file

@ -1,14 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
width: 100px;
height: 200px;
}
</style>
<img id=target src="resources/dice.png"></img>

15
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-012.html
View file

@ -1,15 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-012-ref.html">
<meta name="assert" content="intrinsic-size overrides replaced content's intrinsic dimensions">
<style>
#target {
intrinsic-size: 100px 200px;
}
</style>
<img id=target src="resources/dice.png"></img>

18
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-013-ref.html
View file

@ -1,18 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-size changes</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#border {
width: max-content;
border: 1px solid black;
}
#border > div {
width: 77px;
height: 88px;
}
</style>
<div id=border><div id=target></div></div>

32
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-013.html
View file

@ -1,32 +0,0 @@
<!doctype html>
<html class="reftest-wait">
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-size changes.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-013-ref.html">
<meta name="assert" content="changes in intrinsic-size cause reflow">
<script src="/common/reftest-wait.js"></script>
<style>
#border {
width: max-content;
border: 1px solid black;
}
#border > div {
intrinsic-size: 55px 66px;
}
</style>
<div id=border><div id=target></div></div>
<script>
function changeStyle() {
document.getElementById("target").style = "intrinsic-size: 77px 88px;";
requestAnimationFrame(takeScreenshot);
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(changeStyle));
</script>
</html>

18
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-014-ref.html
View file

@ -1,18 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: fieldset</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
fieldset {
box-sizing: content-box;
width: 111px;
height: 222px;
}
</style>
<fieldset>
<legend>This is a legend</legend>
This is some content.
</fieldset>

19
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-014.html
View file

@ -1,19 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: fieldset</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-014-ref.html">
<meta name="assert" content="intrinsic-size sizes fieldsets">
<style>
fieldset {
width: max-content;
intrinsic-size: 111px 222px;
}
</style>
<fieldset>
<legend>This is a legend</legend>
This is some content.
</fieldset>

16
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-015-ref.html
View file

@ -1,16 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS intrinsic-size: inline flex</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<style>
div {
display: inline-flex;
border: 5px solid green;
width: 111px;
height: 222px;
box-sizing: content-box;
}
</style>
<div></div>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-015.html
View file

@ -1,17 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS intrinsic-size: inline flex</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="intrinsic-size-015-ref.html">
<meta name="assert" content="intrinsic-size sizes an inline-flex element">
<style>
div {
display: inline-flex;
border: 5px solid green;
intrinsic-size: 111px 222px;
color: transparent;
}
</style>
<div>test</div>

39
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-016-ref.html
View file

@ -1,39 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex row, items with size containment (ref)</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#flex {
display: flex;
flex-direction: row;
width: 500px;
height: 100px;
}
.item {
border: 1px solid black;
box-sizing: content-box;
}
#one {
background: lightblue;
width: 55px;
flex-grow: 3;
}
#two {
background: lightgreen;
width: 66px;
flex-grow: 2;
}
#three {
background: lightgrey;
width: 77px;
flex-grow: 1;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

41
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-016.html
View file

@ -1,41 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex row, items with size containment</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-016-ref.html">
<meta name="assert" content="intrinsic-size take 'priority' over size-containment in flex">
<style>
#flex {
display: flex;
flex-direction: row;
width: 500px;
height: 100px;
}
.item {
border: 1px solid black;
contain: size;
}
#one {
background: lightblue;
intrinsic-size: 55px 11px;
flex-grow: 3;
}
#two {
background: lightgreen;
intrinsic-size: 66px 22px;
flex-grow: 2;
}
#three {
background: lightgrey;
intrinsic-size: 77px 33px;
flex-grow: 1;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-017-ref.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content (vertical-lr)</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
body {
writing-mode: vertical-lr;
}
#target {
width: 100px;
height: 200px;
}
</style>
<img id=target src="resources/dice.png"></img>

20
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-017.html
View file

@ -1,20 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content (vertical-lr)</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-017-ref.html">
<meta name="assert" content="intrinsic-size specifies physical dimensions on replaced content">
<style>
body {
writing-mode: vertical-lr;
}
#target {
intrinsic-size: 100px 200px;
inline-size: min-content;
block-size: auto;
}
</style>
<img id=target src="resources/dice.png"></img>

15
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-018-ref.html
View file

@ -1,15 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: sized div</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
width: 55px;
height: 66px;
}
</style>
<div id=target></div>

18
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-018.html
View file

@ -1,18 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: sized div</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-018-ref.html">
<meta name="assert" content="width / height ignore intrinsic-size">
<style>
#target {
background: lightblue;
width: 55px;
height: 66px;
intrinsic-size: 111px 222px;
}
</style>
<div id=target></div>

15
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-019-ref.html
View file

@ -1,15 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: div with fit-content width</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
width: 111px;
height: 222px;
}
</style>
<div id=target></div>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-019.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: div with fit-content width</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-019-ref.html">
<meta name="assert" content="div is sized to intrinsic-width when width is fit-content">
<style>
#target {
background: lightblue;
intrinsic-size: 111px 222px;
width: fit-content;
}
</style>
<div id=target></div>

14
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-020-ref.html
View file

@ -1,14 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content (min-content)</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
width: 100px;
height: 200px;
}
</style>
<img id=target src="resources/dice.png"></img>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-020.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content (min-content)</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-020-ref.html">
<meta name="assert" content="replaced content is sized to intrinsic-width when width is min-content">
<style>
#target {
intrinsic-size: 100px 200px;
inline-size: min-content;
block-size: auto;
}
</style>
<img id=target src="resources/dice.png"></img>

41
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-021-ref.html
View file

@ -1,41 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex row, flex height based on children</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
width: 250px;
}
.item {
border: 1px solid black;
box-sizing: content-box;
}
#one {
background: lightblue;
width: 55px;
height: 21px;
}
#two {
background: lightgreen;
width: 66px;
height: 42px;
}
#three {
background: lightgrey;
align-self: stretch;
width: 77px;
height: 63px;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

39
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-021.html
View file

@ -1,39 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex row, flex height based on children</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-021-ref.html">
<meta name="assert" content="flex container is sized by the largest intrinsic-height of content, even with align-self: stretch">
<style>
#flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
width: 250px;
}
.item {
border: 1px solid black;
}
#one {
background: lightblue;
intrinsic-size: 55px 21px;
}
#two {
background: lightgreen;
intrinsic-size: 66px 42px;
}
#three {
background: lightgrey;
align-self: stretch;
intrinsic-size: 77px 63px;
}
</style>
<div id=flex>
<div class=item id=one></div>
<div class=item id=two></div>
<div class=item id=three></div>
</div>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-022-ref.html
View file

@ -1,30 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
box-sizing: content-box;
width: 70px;
height: 80px;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
opacity: 0.5;
height: 100%;
}
</style>
<div id=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

31
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-022.html
View file

@ -1,31 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-022-ref.html">
<meta name="assert" content="grid container is sized by intrinsic-size, even if definite track sizes overflow">
<style>
#grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
intrinsic-size: 70px 80px;
width: max-content;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
opacity: 0.5;
height: 100%;
}
</style>
<div id=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

29
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-023-ref.html
View file

@ -1,29 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#grid {
border: 3px solid black;
display: grid;
grid-template: 1fr 2fr / 3fr 4fr;
box-sizing: content-box;
width: 70px;
height: 80px;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
height: 100%;
}
</style>
<div id=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-023.html
View file

@ -1,30 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-023-ref.html">
<meta name="assert" content="grid container is sized by intrinsic-size, with fr-tracks using that space">
<style>
#grid {
border: 3px solid black;
display: grid;
grid-template: 1fr 2fr / 3fr 4fr;
intrinsic-size: 70px 80px;
width: max-content;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
height: 100%;
}
</style>
<div id=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-024-ref.html
View file

@ -1,30 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size, large size</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
box-sizing: content-box;
width: 200px;
height: 300px;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
opacity: 0.5;
height: 100%;
}
</style>
<div id=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

31
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-024.html
View file

@ -1,31 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size, large size</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-024-ref.html">
<meta name="assert" content="intrinsic-size sizes grid container, even if definite tracks are smaller">
<style>
#grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
intrinsic-size: 200px 300px;
width: max-content;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
opacity: 0.5;
height: 100%;
}
</style>
<div id=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

56
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-025-ref.html
View file

@ -1,56 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size, auto-fit</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.grid {
border: 3px solid black;
display: grid;
width: 70px;
height: 80px;
box-sizing: content-box;
background: lightblue;
grid-gap: 5px;
}
.one {
grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
}
.two {
grid-template: 1fr 2fr / repeat(auto-fit, 15px);
}
.three {
grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
}
.item {
background: green;
height: 100%;
}
</style>
<div class="grid one">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid three">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

57
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-025.html
View file

@ -1,57 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size, auto-fit</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-025-ref.html">
<meta name="assert" content="definite size auto-fit uses intrinsic-size for the available space">
<style>
.grid {
border: 3px solid black;
display: grid;
intrinsic-size: 70px 80px;
width: max-content;
background: lightblue;
grid-gap: 5px;
}
.one {
grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
}
.two {
grid-template: 1fr 2fr / repeat(auto-fit, 15px);
}
.three {
grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
}
.item {
background: green;
height: 100%;
}
</style>
<div class="grid one">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid three">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

53
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-026-ref.html
View file

@ -1,53 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid auto-fit, min- max- size interactions</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.grid {
display: inline-grid;
border: 1px solid black;
grid-template-columns: repeat(auto-fit, 100px);
}
.one {
width: 200px;
}
.two {
width: 200px;
}
.three {
width: 200px;
}
.four {
width: 150px;
}
.item {
background: green;
height: 100%;
}
</style>
<p>min-width larger than intrinsic-width:
<div class="grid one">
<div class="item">one</div>
<div class="item">two</div>
</div>
<p>min-width smaller than intrinsic-width:
<div class="grid two">
<div class="item">one</div>
<div class="item">two</div>
</div>
<p>max-width ignored since min-width is larger:
<div class="grid three">
<div class="item">one</div>
<div class="item">two</div>
</div>
<p>min-width shrinks grid since it overrides intrinsic-width:
<div class="grid four">
<div class="item">one</div>
<div class="item">two</div>
</div>

61
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-026.html
View file

@ -1,61 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid auto-fit, min- max- size interactions</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-026-ref.html">
<meta name="assert" content="auto-fit columns, with intrinsic-size interacting with min- and max- width">
<style>
.grid {
display: inline-grid;
border: 1px solid black;
grid-template-columns: repeat(auto-fit, 100px);
}
.one {
intrinsic-width: 100px;
min-width: 200px;
}
.two {
intrinsic-width: 200px;
min-width: 100px;
}
.three {
intrinsic-width: 100px;
min-width: 200px;
max-width: 150px;
}
.four {
intrinsic-width: 200px;
min-width: 100px;
max-width: 150px;
}
.item {
background: green;
height: 100%;
}
</style>
<p>min-width larger than intrinsic-width:
<div class="grid one">
<div class="item">one</div>
<div class="item">two</div>
</div>
<p>min-width smaller than intrinsic-width:
<div class="grid two">
<div class="item">one</div>
<div class="item">two</div>
</div>
<p>max-width ignored since min-width is larger:
<div class="grid three">
<div class="item">one</div>
<div class="item">two</div>
</div>
<p>min-width shrinks grid since it overrides intrinsic-width:
<div class="grid four">
<div class="item">one</div>
<div class="item">two</div>
</div>

37
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-auto-001-ref.html
View file

@ -1,37 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-width auto</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
body > div {
box-sizing: content-box;
border: 1px solid black;
width: max-content;
height: 111px;
}
#one {
overflow: hidden;
width: 0px;
}
#two {
overflow-x: scroll;
height: auto;
}
#two > div {
height: 111px;
}
#three {
height: auto;
}
#three > div {
height: 111px;
}
</style>
<div id=one></div>
<br>
<div id=two><div></div></div>
<br>
<div id=three><div>Lorem ipsum</div></div>

34
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-auto-001.html
View file

@ -1,34 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-width auto</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-auto-001-ref.html">
<meta name="assert" content="intrinsic-size auto is treated as 0 when overflow is not 'visible'">
<style>
div {
width: max-content;
intrinsic-size: auto 111px;
border: 1px solid black;
}
#one {
overflow: hidden;
}
#two {
overflow-x: scroll;
}
/* We can't have overflow-x: visible without overflow-y not being visible and vice versa
(see Computed value in https://www.w3.org/TR/css-overflow-3/#overflow-properties).
Hence, we set both overflow directions.
*/
#three {
overflow: visible;
}
</style>
<div id=one>Lorem ipsum</div>
<br>
<div id=two>Lorem ipsum</div>
<br>
<div id=three>Lorem ipsum</div>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-auto-002-ref.html
View file

@ -1,30 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-width auto</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
body > div {
box-sizing: content-box;
border: 1px solid black;
width: 111px;
}
#one {
overflow: hidden;
height: 0px;
}
#two {
overflow-y: scroll;
width: max-content;
}
#two > div {
width: 111px;
}
</style>
<div id=one></div>
<br>
<div id=two><div></div></div>
<br>
<div id=three>Lorem ipsum</div>

34
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-auto-002.html
View file

@ -1,34 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-width auto</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-auto-002-ref.html">
<meta name="assert" content="intrinsic-size auto is treated as 0 when overflow is not 'visible'">
<style>
div {
width: max-content;
intrinsic-size: 111px auto;
border: 1px solid black;
}
#one {
overflow: hidden;
}
#two {
overflow-y: scroll;
}
/* We can't have overflow-x: visible without overflow-y not being visible and vice versa
(see Computed value in https://www.w3.org/TR/css-overflow-3/#overflow-properties).
Hence, we set both overflow directions.
*/
#three {
overflow: visible;
}
</style>
<div id=one>Lorem ipsum</div>
<br>
<div id=two>Lorem ipsum</div>
<br>
<div id=three>Lorem ipsum</div>

37
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-auto-003-ref.html
View file

@ -1,37 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content with auto</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
img {
border: 1px solid black;
box-sizing: content-box;
}
#target1 {
height: 200px;
/* the source img is 320x240, and the intrinsic size only adjusted the height */
width: 320px;
}
#target2 {
width: 100px;
/* the source img is 320x240, and the intrinsic size only adjusted the width */
height: 240px;
}
#target3 {
width: 0px;
height: 200px;
overflow: hidden;
}
#target4 {
width: 100px;
height: 0px;
overflow: hidden;
}
</style>
<img id=target1 src="resources/dice.png"></img>
<img id=target2 src="resources/dice.png"></img>
<img id=target3 src="resources/dice.png"></img>
<img id=target4 src="resources/dice.png"></img>

32
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-auto-003.html
View file

@ -1,32 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content with auto</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-auto-003-ref.html">
<meta name="assert" content="intrinsic-size auto is treated as 0 when overflow is not 'visible'">
<style>
img {
border: 1px solid black;
}
#target1 {
intrinsic-size: auto 200px;
}
#target2 {
intrinsic-size: 100px auto;
}
#target3 {
intrinsic-size: auto 200px;
overflow: hidden;
}
#target4 {
intrinsic-size: 100px auto;
overflow: hidden;
}
</style>
<img id=target1 src="resources/dice.png"></img>
<img id=target2 src="resources/dice.png"></img>
<img id=target3 src="resources/dice.png"></img>
<img id=target4 src="resources/dice.png"></img>

15
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-001-ref.html
View file

@ -1,15 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-width legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#target {
background: lightblue;
width: max-content;
height: 222px;
}
</style>
<div id=target>Lorem ipsum</div>

17
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-001.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: intrinsic-width legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-001-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
#target {
background: lightblue;
width: max-content;
intrinsic-size: legacy 222px;
}
</style>
<div id=target>Lorem ipsum</div>

41
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-002-ref.html
View file

@ -1,41 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex with legacy intrinsic dimensions</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#flex {
display: flex;
flex-direction: column;
height: 500px;
}
.item {
width: max-content;
}
#one {
background: lightblue;
flex-grow: 3;
}
#one > div {
height: 222px;
}
#two {
background: lightgreen;
width: 333px;
flex-grow: 2;
}
#three {
background: lightgrey;
flex-grow: 1;
}
#three > div {
height: 444px;
}
</style>
<div id=flex>
<div class=item id=one><div>Lorem ipsum</div></div>
<div class=item id=two>dolor sit amet</div>
<div class=item id=three><div>consectetur adipiscing elit</div></div>
</div>

39
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-002.html
View file

@ -1,39 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: flex with legacy intrinsic dimensions</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-002-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
#flex {
display: flex;
flex-direction: column;
height: 500px;
}
.item {
width: max-content;
}
#one {
background: lightblue;
intrinsic-size: legacy 222px;
flex-grow: 3;
}
#two {
background: lightgreen;
intrinsic-size: 333px legacy;
flex-grow: 2;
}
#three {
background: lightgrey;
intrinsic-size: legacy 444px;
flex-grow: 1;
}
</style>
<div id=flex>
<div class=item id=one>Lorem ipsum</div>
<div class=item id=two>dolor sit amet</div>
<div class=item id=three>consectetur adipiscing elit</div>
</div>

20
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-003-ref.html
View file

@ -1,20 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: select multiple with legacy sizing</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
#one {
box-sizing: content-box;
height: 222px;
}
#two {
box-sizing: content-box;
width: 111px;
overflow: visible;
}
</style>
<select multiple id=one></select>
<select multiple id=two></select>

20
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-003.html
View file

@ -1,20 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: select multiple with legacy sizing</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-003-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
#one {
intrinsic-size: legacy 222px;
}
#two {
intrinsic-size: 111px legacy;
overflow: visible;
}
</style>
<select multiple id=one></select>
<select multiple id=two></select>

25
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-004-ref.html
View file

@ -1,25 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
img {
border: 1px solid black;
box-sizing: content-box;
}
#target1 {
height: 200px;
/* the source img is 320x240, and the intrinsic size only adjusted the height */
width: 320px;
}
#target2 {
width: 100px;
/* the source img is 320x240, and the intrinsic size only adjusted the width */
height: 240px;
}
</style>
<img id=target1 src="resources/dice.png"></img>
<img id=target2 src="resources/dice.png"></img>

22
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-004.html
View file

@ -1,22 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: replaced content with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-004-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
img {
border: 1px solid black;
}
#target1 {
intrinsic-size: legacy 200px;
}
#target2 {
intrinsic-size: 100px legacy;
}
</style>
<img id=target1 src="resources/dice.png"></img>
<img id=target2 src="resources/dice.png"></img>

36
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-005-ref.html
View file

@ -1,36 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
box-sizing: content-box;
width: 70px;
height: 80px;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
opacity: 0.5;
height: 100%;
}
</style>
<div class=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

44
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-005.html
View file

@ -1,44 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-005-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
.grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
background: lightblue;
grid-gap: 5px;
}
.one {
intrinsic-size: legacy 80px;
width: 70px;
}
.two {
intrinsic-size: 70px legacy;
height: 80px;
width: min-content;
}
.item {
background: lightgreen;
opacity: 0.5;
height: 100%;
}
</style>
<div class="grid one">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

35
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-006-ref.html
View file

@ -1,35 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.grid {
border: 3px solid black;
display: grid;
grid-template: 1fr 2fr / 3fr 4fr;
box-sizing: content-box;
width: 70px;
height: 80px;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
height: 100%;
}
</style>
<div class=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

43
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-006.html
View file

@ -1,43 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-006-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
.grid {
border: 3px solid black;
display: grid;
grid-template: 1fr 2fr / 3fr 4fr;
background: lightblue;
grid-gap: 5px;
}
.one {
intrinsic-size: legacy 80px;
width: 70px;
}
.two {
intrinsic-size: 70px legacy;
width: min-content;
height: 80px;
}
.item {
background: lightgreen;
height: 100%;
}
</style>
<div class="grid one">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

35
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-007-ref.html
View file

@ -1,35 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size, large size with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
box-sizing: content-box;
width: 200px;
height: 300px;
background: lightblue;
grid-gap: 5px;
}
.item {
background: lightgreen;
height: 100%;
}
</style>
<div class=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class=grid>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

43
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-007.html
View file

@ -1,43 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid definite size, large size with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-007-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
.grid {
border: 3px solid black;
display: grid;
grid-template: 55px 66px / 77px 88px;
background: lightblue;
grid-gap: 5px;
}
.one {
intrinsic-size: legacy 300px;
width: 200px;
}
.two {
intrinsic-size: 200px legacy;
width: max-content;
height: 300px;
}
.item {
background: lightgreen;
height: 100%;
}
</style>
<div class="grid one">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

80
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-008-ref.html
View file

@ -1,80 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size, auto-fit with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<style>
.grid {
border: 3px solid black;
display: grid;
width: 70px;
height: 80px;
box-sizing: content-box;
background: lightblue;
grid-gap: 5px;
}
.one {
grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
}
.two {
grid-template: 1fr 2fr / repeat(auto-fit, 15px);
}
.three {
grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
}
.item {
background: green;
height: 100%;
}
</style>
<div class="grid one">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid three">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid one">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid three">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

87
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/intrinsic-size-with-legacy-008.html
View file

@ -1,87 +0,0 @@
<!doctype html>
<meta charset="utf8">
<title>CSS intrinsic-size: grid indefinite size, auto-fit with legacy</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="match" href="intrinsic-size-with-legacy-008-ref.html">
<meta name="assert" content="intrinsic-size legacy is treated the same as if it was not specified.">
<style>
.grid {
border: 3px solid black;
display: grid;
background: lightblue;
grid-gap: 5px;
}
.one {
grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
}
.two {
grid-template: 1fr 2fr / repeat(auto-fit, 15px);
}
.three {
grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
}
.width {
intrinsic-size: 70px legacy;
width: max-content;
height: 80px;
}
.height {
intrinsic-size: legacy 80px;
width: 70px;
}
.item {
background: green;
height: 100%;
}
</style>
<div class="grid one width">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two width">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid three width">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid one height">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid two height">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
<div class="grid three height">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-block-size-computed.html
View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-block-size with computed values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-block-size supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id=target></div>
<div id=scratch></div>
<script>
function length_ref(length) {
document.getElementById("scratch").style.width = length;
return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width");
}
test_computed_value("intrinsic-block-size", "auto");
test_computed_value("intrinsic-block-size", "legacy");
test_computed_value("intrinsic-block-size", "1px");
test_computed_value("intrinsic-block-size", "2vw", length_ref("2vw"));
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-block-size-invalid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-block-size with invalid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-block-size supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("intrinsic-block-size", "none");
test_invalid_value("intrinsic-block-size", "10%");
test_invalid_value("intrinsic-block-size", "-1px");
</script>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-block-size-valid.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-block-size with valid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-block-size supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("intrinsic-block-size", "auto");
test_valid_value("intrinsic-block-size", "legacy");
test_valid_value("intrinsic-block-size", "1px");
test_valid_value("intrinsic-block-size", "2vw");
</script>
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-height-computed.html
View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-height with computed values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-height supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id=target></div>
<div id=scratch></div>
<script>
function length_ref(length) {
document.getElementById("scratch").style.width = length;
return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width");
}
test_computed_value("intrinsic-height", "auto");
test_computed_value("intrinsic-height", "legacy");
test_computed_value("intrinsic-height", "1px");
test_computed_value("intrinsic-height", "2vw", length_ref("2vw"));
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-height-invalid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-height with invalid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-height supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("intrinsic-height", "none");
test_invalid_value("intrinsic-height", "10%");
test_invalid_value("intrinsic-height", "-1px");
</script>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-height-valid.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-height with valid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-height supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("intrinsic-height", "auto");
test_valid_value("intrinsic-height", "legacy");
test_valid_value("intrinsic-height", "1px");
test_valid_value("intrinsic-height", "2vw");
</script>
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-inline-size-computed.html
View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-inline-size with computed values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-inline-size supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id=target></div>
<div id=scratch></div>
<script>
function length_ref(length) {
document.getElementById("scratch").style.width = length;
return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width");
}
test_computed_value("intrinsic-inline-size", "auto");
test_computed_value("intrinsic-inline-size", "legacy");
test_computed_value("intrinsic-inline-size", "1px");
test_computed_value("intrinsic-inline-size", "2vw", length_ref("2vw"));
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-inline-size-invalid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-inline-size with invalid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-inline-size supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("intrinsic-inline-size", "none");
test_invalid_value("intrinsic-inline-size", "10%");
test_invalid_value("intrinsic-inline-size", "-1px");
</script>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-inline-size-valid.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-inline-size with valid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-inline-size supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("intrinsic-inline-size", "auto");
test_valid_value("intrinsic-inline-size", "legacy");
test_valid_value("intrinsic-inline-size", "1px");
test_valid_value("intrinsic-inline-size", "2vw");
</script>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-size-computed.html
View file

@ -1,38 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-size with computed values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-size supports the full grammar '[auto | legacy | <length>]{1,2}'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id=target></div>
<div id=scratch></div>
<script>
function length_ref(length) {
document.getElementById("scratch").style.width = length;
return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width");
}
test_computed_value("intrinsic-size", "auto");
test_computed_value("intrinsic-size", "legacy");
test_computed_value("intrinsic-size", "legacy auto");
test_computed_value("intrinsic-size", "auto legacy");
test_computed_value("intrinsic-size", "1px");
test_computed_value("intrinsic-size", "1px auto");
test_computed_value("intrinsic-size", "1px legacy");
test_computed_value("intrinsic-size", "auto 1px");
test_computed_value("intrinsic-size", "legacy 1px");
test_computed_value("intrinsic-size", "2vw 3px", length_ref("2vw") + " 3px");
test_computed_value("intrinsic-size", "2px 3vh", "2px " + length_ref("3vh"));
test_computed_value("intrinsic-size", "5px 5px", "5px");
</script>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-size-invalid.html
View file

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-size with invalid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-size supports the full grammar '[auto | legacy | <length>]{1,2}'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("intrinsic-size", "auto legacy auto");
test_invalid_value("intrinsic-size", "10%");
test_invalid_value("intrinsic-size", "2em 3px 5px");
test_invalid_value("intrinsic-size", "1px 1%");
test_invalid_value("intrinsic-size", "1px auto auto");
test_invalid_value("intrinsic-size", "-1px");
</script>
</body>
</html>

61
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-size-sets-computed-dimensions.html
View file

@ -1,61 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-size sets component dimensions.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-size sets component dimensions.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#horizontal-target {
writing-mode: horizontal-tb;
}
#vertical-target {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div id=horizontal-target></div>
<div id=vertical-target></div>
<script>
const horizontal = document.getElementById("horizontal-target");
const vertical = document.getElementById("vertical-target");
function runTest() {
const horizontal_style = getComputedStyle(horizontal);
const vertical_style = getComputedStyle(vertical);
test(() => {
assert_equals(horizontal_style["intrinsic-width"], "1px");
assert_equals(vertical_style["intrinsic-width"], "1px");
}, 'intrinsic-width set correctly');
test(() => {
assert_equals(horizontal_style["intrinsic-height"], "2px");
assert_equals(vertical_style["intrinsic-height"], "2px");
}, 'intrinsic-height set correctly');
test(() => {
assert_equals(horizontal_style["intrinsic-inline-size"], "1px");
assert_equals(vertical_style["intrinsic-inline-size"], "2px");
}, 'intrinsic-inline-size set correctly');
test(() => {
assert_equals(horizontal_style["intrinsic-block-size"], "2px");
assert_equals(vertical_style["intrinsic-block-size"], "1px");
}, 'intrinsic-block-size set correctly');
}
window.onload = () => {
horizontal.style["intrinsic-size"] = "1px 2px";
vertical.style["intrinsic-size"] = "1px 2px";
runTest();
};
</script>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-size-valid.html
View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-size with valid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-size supports the full grammar '[auto | legacy | <length>]{1,2}'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("intrinsic-size", "auto");
test_valid_value("intrinsic-size", "legacy");
test_valid_value("intrinsic-size", "auto legacy");
test_valid_value("intrinsic-size", "auto auto", "auto");
test_valid_value("intrinsic-size", "legacy legacy", "legacy");
test_valid_value("intrinsic-size", "1px");
test_valid_value("intrinsic-size", "2em 3px");
test_valid_value("intrinsic-size", "5px 5px", "5px");
</script>
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-width-computed.html
View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-width with computed values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-width supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id=target></div>
<div id=scratch></div>
<script>
function length_ref(length) {
document.getElementById("scratch").style.width = length;
return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width");
}
test_computed_value("intrinsic-width", "auto");
test_computed_value("intrinsic-width", "legacy");
test_computed_value("intrinsic-width", "1px");
test_computed_value("intrinsic-width", "2vw", length_ref("2vw"));
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-width-invalid.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-width with invalid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-width supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("intrinsic-width", "none");
test_invalid_value("intrinsic-width", "10%");
test_invalid_value("intrinsic-width", "-1px");
</script>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/parsing/intrinsic-width-valid.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic Size Test: intrinsic-width with valid values</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<meta name="assert" content="intrinsic-width supports the full grammar 'auto | legacy | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("intrinsic-width", "auto");
test_valid_value("intrinsic-width", "legacy");
test_valid_value("intrinsic-width", "1px");
test_valid_value("intrinsic-width", "2vw");
</script>
</body>
</html>

BIN
tests/wpt/web-platform-tests/css/css-sizing/intrinsic-size/resources/dice.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 57 KiB

16
tests/wpt/web-platform-tests/css/css-sizing/percentage-resolution-001-ref.html
View file

@ -1,16 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Sizing: Test that percentages don't resolve against min-content</title>
<link rel="author" title="Google Inc." href="https://www.google.com/" />
<style>
.inner {
background-color: green;
}
</style>
<body>
<div class="outer">
<div class="inner">This should be a single-line green background with no red visible.</div>
</div>
</body>

26
tests/wpt/web-platform-tests/css/css-sizing/percentage-resolution-001.html
View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Sizing: Test that percentages don't resolve against min-content</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing" />
<link rel="author" title="Google Inc." href="https://www.google.com/" />
<link rel="match" href="percentage-resolution-001-ref.html" />
<style>
.outer {
min-height: min-content;
max-height: min-content;
height: 500px;
background-color: red;
}
.inner {
height: 50%;
background-color: green;
}
</style>
<body>
<div class="outer">
<div class="inner">This should be a single-line green background with no red visible.</div>
</div>
</body>