LibWeb: Import a bunch of /css/css-display tests from WPT

This commit is contained in:
Andreas Kling 2024-11-15 13:06:08 +01:00 committed by Andreas Kling
parent 02268e9c60
commit 70695e4fce
Notes: github-actions[bot] 2024-11-15 13:47:06 +00:00
38 changed files with 1457 additions and 0 deletions

View file

@ -0,0 +1,24 @@
Summary
Harness status: OK
Rerun
Found 14 tests
14 Pass
Details
Result Test Name MessagePass CSS Animations: property <display> from [grid] to [flex] at (-0.3) should be [grid]
Pass CSS Animations: property <display> from [grid] to [flex] at (0) should be [grid]
Pass CSS Animations: property <display> from [grid] to [flex] at (0.3) should be [grid]
Pass CSS Animations: property <display> from [grid] to [flex] at (0.5) should be [flex]
Pass CSS Animations: property <display> from [grid] to [flex] at (0.6) should be [flex]
Pass CSS Animations: property <display> from [grid] to [flex] at (1) should be [flex]
Pass CSS Animations: property <display> from [grid] to [flex] at (1.5) should be [flex]
Pass Web Animations: property <display> from [grid] to [flex] at (-0.3) should be [grid]
Pass Web Animations: property <display> from [grid] to [flex] at (0) should be [grid]
Pass Web Animations: property <display> from [grid] to [flex] at (0.3) should be [grid]
Pass Web Animations: property <display> from [grid] to [flex] at (0.5) should be [flex]
Pass Web Animations: property <display> from [grid] to [flex] at (0.6) should be [flex]
Pass Web Animations: property <display> from [grid] to [flex] at (1) should be [flex]
Pass Web Animations: property <display> from [grid] to [flex] at (1.5) should be [flex]

View file

@ -0,0 +1,53 @@
Summary
Harness status: OK
Rerun
Found 42 tests
28 Pass
14 Fail
Details
Result Test Name MessagePass CSS Transitions with transition-behavior:allow-discrete: property <display> from [none] to [flex] at (-0.3) should be [flex]
Pass CSS Transitions with transition-behavior:allow-discrete: property <display> from [none] to [flex] at (0) should be [flex]
Pass CSS Transitions with transition-behavior:allow-discrete: property <display> from [none] to [flex] at (0.3) should be [flex]
Pass CSS Transitions with transition-behavior:allow-discrete: property <display> from [none] to [flex] at (0.5) should be [flex]
Pass CSS Transitions with transition-behavior:allow-discrete: property <display> from [none] to [flex] at (0.6) should be [flex]
Pass CSS Transitions with transition-behavior:allow-discrete: property <display> from [none] to [flex] at (1) should be [flex]
Pass CSS Transitions with transition-behavior:allow-discrete: property <display> from [none] to [flex] at (1.5) should be [flex]
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <display> from [none] to [flex] at (-0.3) should be [flex]
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <display> from [none] to [flex] at (0) should be [flex]
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <display> from [none] to [flex] at (0.3) should be [flex]
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <display> from [none] to [flex] at (0.5) should be [flex]
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <display> from [none] to [flex] at (0.6) should be [flex]
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <display> from [none] to [flex] at (1) should be [flex]
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <display> from [none] to [flex] at (1.5) should be [flex]
Pass CSS Transitions: property <display> from [none] to [flex] at (-0.3) should be [flex]
Pass CSS Transitions: property <display> from [none] to [flex] at (0) should be [flex]
Pass CSS Transitions: property <display> from [none] to [flex] at (0.3) should be [flex]
Pass CSS Transitions: property <display> from [none] to [flex] at (0.5) should be [flex]
Pass CSS Transitions: property <display> from [none] to [flex] at (0.6) should be [flex]
Pass CSS Transitions: property <display> from [none] to [flex] at (1) should be [flex]
Pass CSS Transitions: property <display> from [none] to [flex] at (1.5) should be [flex]
Pass CSS Transitions with transition: all: property <display> from [none] to [flex] at (-0.3) should be [flex]
Pass CSS Transitions with transition: all: property <display> from [none] to [flex] at (0) should be [flex]
Pass CSS Transitions with transition: all: property <display> from [none] to [flex] at (0.3) should be [flex]
Pass CSS Transitions with transition: all: property <display> from [none] to [flex] at (0.5) should be [flex]
Pass CSS Transitions with transition: all: property <display> from [none] to [flex] at (0.6) should be [flex]
Pass CSS Transitions with transition: all: property <display> from [none] to [flex] at (1) should be [flex]
Pass CSS Transitions with transition: all: property <display> from [none] to [flex] at (1.5) should be [flex]
Fail CSS Animations: property <display> from [none] to [flex] at (-0.3) should be [block]
Fail CSS Animations: property <display> from [none] to [flex] at (0) should be [block]
Fail CSS Animations: property <display> from [none] to [flex] at (0.3) should be [block]
Fail CSS Animations: property <display> from [none] to [flex] at (0.5) should be [block]
Fail CSS Animations: property <display> from [none] to [flex] at (0.6) should be [block]
Fail CSS Animations: property <display> from [none] to [flex] at (1) should be [block]
Fail CSS Animations: property <display> from [none] to [flex] at (1.5) should be [block]
Fail Web Animations: property <display> from [none] to [flex] at (-0.3) should be [block]
Fail Web Animations: property <display> from [none] to [flex] at (0) should be [block]
Fail Web Animations: property <display> from [none] to [flex] at (0.3) should be [block]
Fail Web Animations: property <display> from [none] to [flex] at (0.5) should be [block]
Fail Web Animations: property <display> from [none] to [flex] at (0.6) should be [block]
Fail Web Animations: property <display> from [none] to [flex] at (1) should be [block]
Fail Web Animations: property <display> from [none] to [flex] at (1.5) should be [block]

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Fail
Details
Result Test Name MessageFail Dynamic changes to `display` causing blockification of children are handled correctly

View file

@ -0,0 +1,15 @@
Summary
Harness status: OK
Rerun
Found 5 tests
5 Pass
Details
Result Test Name MessagePass Serialization of computed style value for display:contents
Pass display:contents element as inherit parent - explicit inheritance
Pass display:contents element as inherit parent - implicit inheritance
Pass Resolved value should be computed value, not used value, for display:contents
Pass display:contents is blockified for root elements

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Fail
Details
Result Test Name MessageFail element with display:contents is focusable

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass Tests that the 'contents' value for the 'display' property is correctly parsed

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass Loading this page should not cause a crash.

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass Loading this page should not cause a crash.

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Fail
Details
Result Test Name MessageFail display of first-letter and first-line

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass List item height after DOM change.

View file

@ -0,0 +1,21 @@
Summary
Harness status: OK
Rerun
Found 10 tests
8 Pass
2 Fail
Details
Result Test Name MessageFail computed display on <div style="display: math;">
Pass computed display on <div style="display: inline math;">
Pass computed display on <div style="display: math inline;">
Pass computed display on <div style="display: block math;">
Pass computed display on <div style="display: math block;">
Fail computed display on <svg style="display: math;">
Pass computed display on <svg style="display: inline math;">
Pass computed display on <svg style="display: math inline;">
Pass computed display on <svg style="display: block math;">
Pass computed display on <svg style="display: math block;">

View file

@ -0,0 +1,17 @@
Summary
Harness status: OK
Rerun
Found 6 tests
1 Pass
5 Fail
Details
Result Test Name MessagePass computed display on ::before and ::after for <div class="block">
Fail computed display on ::before and ::after for <math class="block">
Fail computed display on ::before and ::after for <mrow class="block">
Fail computed display on ::before and ::after for <div class="inline">
Fail computed display on ::before and ::after for <math class="inline">
Fail computed display on ::before and ::after for <mrow class="inline">

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass computed style for float

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass computed style for float

View file

@ -0,0 +1,12 @@
Summary
Harness status: OK
Rerun
Found 2 tests
2 Pass
Details
Result Test Name MessagePass Property display has initial value inline
Pass Property display does not inherit

View file

@ -0,0 +1,123 @@
Summary
Harness status: OK
Rerun
Found 112 tests
88 Pass
24 Fail
Details
Result Test Name MessagePass Property display value 'grid'
Pass Property display value 'inline-grid'
Pass Property display value 'inline'
Pass Property display value 'block'
Pass Property display value 'list-item'
Pass Property display value 'inline-block'
Pass Property display value 'table'
Pass Property display value 'inline-table'
Pass Property display value 'table-row-group'
Pass Property display value 'table-header-group'
Pass Property display value 'table-footer-group'
Pass Property display value 'table-row'
Pass Property display value 'table-column-group'
Pass Property display value 'table-column'
Pass Property display value 'table-cell'
Pass Property display value 'table-caption'
Pass Property display value 'none'
Pass Property display value 'flex'
Pass Property display value 'inline-flex'
Pass Property display value 'contents'
Pass Property display value 'run-in'
Pass Property display value 'flow'
Pass Property display value 'flow-root'
Pass Property display value 'ruby'
Pass Property display value 'ruby-base'
Pass Property display value 'ruby-text'
Pass Property display value 'flow list-item'
Pass Property display value 'list-item flow'
Fail Property display value 'flow-root list-item'
Fail Property display value 'list-item flow-root'
Pass Property display value 'block flow'
Pass Property display value 'flow block'
Pass Property display value 'flow-root block'
Pass Property display value 'block flow-root'
Pass Property display value 'flex block'
Pass Property display value 'block flex'
Pass Property display value 'grid block'
Pass Property display value 'block grid'
Pass Property display value 'table block'
Pass Property display value 'block table'
Pass Property display value 'block ruby'
Pass Property display value 'ruby block'
Pass Property display value 'block list-item'
Pass Property display value 'list-item block'
Pass Property display value 'flow block list-item'
Pass Property display value 'block flow list-item'
Pass Property display value 'flow list-item block'
Pass Property display value 'block list-item flow'
Pass Property display value 'list-item block flow'
Pass Property display value 'list-item flow block'
Fail Property display value 'flow-root block list-item'
Fail Property display value 'block flow-root list-item'
Fail Property display value 'flow-root list-item block'
Fail Property display value 'block list-item flow-root'
Fail Property display value 'list-item block flow-root'
Fail Property display value 'list-item flow-root block'
Pass Property display value 'inline flow'
Pass Property display value 'flow inline'
Pass Property display value 'flow-root inline'
Pass Property display value 'inline flow-root'
Pass Property display value 'flex inline'
Pass Property display value 'inline flex'
Pass Property display value 'grid inline'
Pass Property display value 'inline grid'
Pass Property display value 'table inline'
Pass Property display value 'inline table'
Pass Property display value 'inline ruby'
Pass Property display value 'ruby inline'
Fail Property display value 'inline list-item'
Fail Property display value 'list-item inline'
Fail Property display value 'flow inline list-item'
Fail Property display value 'inline flow list-item'
Fail Property display value 'flow list-item inline'
Fail Property display value 'inline list-item flow'
Fail Property display value 'list-item inline flow'
Fail Property display value 'list-item flow inline'
Pass Property display value 'flow-root inline list-item'
Pass Property display value 'inline flow-root list-item'
Pass Property display value 'flow-root list-item inline'
Pass Property display value 'inline list-item flow-root'
Pass Property display value 'list-item inline flow-root'
Pass Property display value 'list-item flow-root inline'
Pass Property display value 'run-in flow'
Pass Property display value 'flow run-in'
Pass Property display value 'flow-root run-in'
Pass Property display value 'run-in flow-root'
Pass Property display value 'flex run-in'
Pass Property display value 'run-in flex'
Pass Property display value 'grid run-in'
Pass Property display value 'run-in grid'
Pass Property display value 'table run-in'
Pass Property display value 'run-in table'
Pass Property display value 'run-in ruby'
Pass Property display value 'ruby run-in'
Fail Property display value 'run-in list-item'
Fail Property display value 'list-item run-in'
Fail Property display value 'flow run-in list-item'
Fail Property display value 'run-in flow list-item'
Fail Property display value 'flow list-item run-in'
Fail Property display value 'run-in list-item flow'
Fail Property display value 'list-item run-in flow'
Fail Property display value 'list-item flow run-in'
Pass Property display value 'flow-root run-in list-item'
Pass Property display value 'run-in flow-root list-item'
Pass Property display value 'flow-root list-item run-in'
Pass Property display value 'run-in list-item flow-root'
Pass Property display value 'list-item run-in flow-root'
Pass Property display value 'list-item flow-root run-in'
Pass position absolute affects computed display
Pass position fixed affects computed display
Pass float left affects computed display
Pass float right affects computed display

View file

@ -0,0 +1,65 @@
Summary
Harness status: OK
Rerun
Found 55 tests
55 Pass
Details
Result Test Name MessagePass e.style['display'] = "grid inline-grid" should not set the property value
Pass e.style['display'] = "none grid" should not set the property value
Pass e.style['display'] = "none flow" should not set the property value
Pass e.style['display'] = "none ruby" should not set the property value
Pass e.style['display'] = "none flow-root" should not set the property value
Pass e.style['display'] = "none list-item" should not set the property value
Pass e.style['display'] = "contents list-item" should not set the property value
Pass e.style['display'] = "list-item contents" should not set the property value
Pass e.style['display'] = "flow flow" should not set the property value
Pass e.style['display'] = "block block" should not set the property value
Pass e.style['display'] = "flow flow-root" should not set the property value
Pass e.style['display'] = "flow-root flow-root" should not set the property value
Pass e.style['display'] = "block inline" should not set the property value
Pass e.style['display'] = "flex ruby" should not set the property value
Pass e.style['display'] = "ruby flex" should not set the property value
Pass e.style['display'] = "inline inline" should not set the property value
Pass e.style['display'] = "flex flex" should not set the property value
Pass e.style['display'] = "grid flex" should not set the property value
Pass e.style['display'] = "ruby grid" should not set the property value
Pass e.style['display'] = "flex grid" should not set the property value
Pass e.style['display'] = "grid table" should not set the property value
Pass e.style['display'] = "table flex" should not set the property value
Pass e.style['display'] = "flex table" should not set the property value
Pass e.style['display'] = "ruby table" should not set the property value
Pass e.style['display'] = "table table" should not set the property value
Pass e.style['display'] = "table flow-root" should not set the property value
Pass e.style['display'] = "flow-root ruby" should not set the property value
Pass e.style['display'] = "list-item list-item" should not set the property value
Pass e.style['display'] = "list-item table" should not set the property value
Pass e.style['display'] = "flex list-item" should not set the property value
Pass e.style['display'] = "list-item grid" should not set the property value
Pass e.style['display'] = "flow flow list-item" should not set the property value
Pass e.style['display'] = "grid flow list-item" should not set the property value
Pass e.style['display'] = "flow list-item flow" should not set the property value
Pass e.style['display'] = "block list-item block" should not set the property value
Pass e.style['display'] = "list-item flow-root flow" should not set the property value
Pass e.style['display'] = "list-item block block" should not set the property value
Pass e.style['display'] = "list-item block list-item" should not set the property value
Pass e.style['display'] = "list-item flow-root list-item" should not set the property value
Pass e.style['display'] = "list-item flow-root block list-item" should not set the property value
Pass e.style['display'] = "list-item block flow-root list-item" should not set the property value
Pass e.style['display'] = "block list-item flow-root list-item" should not set the property value
Pass e.style['display'] = "flow-root list-item block list-item" should not set the property value
Pass e.style['display'] = "list-item ruby" should not set the property value
Pass e.style['display'] = "ruby list-item" should not set the property value
Pass e.style['display'] = "ruby ruby" should not set the property value
Pass e.style['display'] = "ruby flow" should not set the property value
Pass e.style['display'] = "flow ruby" should not set the property value
Pass e.style['display'] = "ruby flow-root" should not set the property value
Pass e.style['display'] = "grid ruby" should not set the property value
Pass e.style['display'] = "table ruby" should not set the property value
Pass e.style['display'] = "table-row flow" should not set the property value
Pass e.style['display'] = "flow table-row" should not set the property value
Pass e.style['display'] = "table-row-group flow-root" should not set the property value
Pass e.style['display'] = "flex table-row-group" should not set the property value

View file

@ -0,0 +1,119 @@
Summary
Harness status: OK
Rerun
Found 108 tests
84 Pass
24 Fail
Details
Result Test Name MessagePass e.style['display'] = "grid" should set the property value
Pass e.style['display'] = "inline-grid" should set the property value
Pass e.style['display'] = "inline" should set the property value
Pass e.style['display'] = "block" should set the property value
Pass e.style['display'] = "list-item" should set the property value
Pass e.style['display'] = "inline-block" should set the property value
Pass e.style['display'] = "table" should set the property value
Pass e.style['display'] = "inline-table" should set the property value
Pass e.style['display'] = "table-row-group" should set the property value
Pass e.style['display'] = "table-header-group" should set the property value
Pass e.style['display'] = "table-footer-group" should set the property value
Pass e.style['display'] = "table-row" should set the property value
Pass e.style['display'] = "table-column-group" should set the property value
Pass e.style['display'] = "table-column" should set the property value
Pass e.style['display'] = "table-cell" should set the property value
Pass e.style['display'] = "table-caption" should set the property value
Pass e.style['display'] = "none" should set the property value
Pass e.style['display'] = "flex" should set the property value
Pass e.style['display'] = "inline-flex" should set the property value
Pass e.style['display'] = "contents" should set the property value
Pass e.style['display'] = "run-in" should set the property value
Pass e.style['display'] = "flow" should set the property value
Pass e.style['display'] = "flow-root" should set the property value
Pass e.style['display'] = "ruby" should set the property value
Pass e.style['display'] = "ruby-base" should set the property value
Pass e.style['display'] = "ruby-text" should set the property value
Pass e.style['display'] = "flow list-item" should set the property value
Pass e.style['display'] = "list-item flow" should set the property value
Fail e.style['display'] = "flow-root list-item" should set the property value
Fail e.style['display'] = "list-item flow-root" should set the property value
Pass e.style['display'] = "block flow" should set the property value
Pass e.style['display'] = "flow block" should set the property value
Pass e.style['display'] = "flow-root block" should set the property value
Pass e.style['display'] = "block flow-root" should set the property value
Pass e.style['display'] = "flex block" should set the property value
Pass e.style['display'] = "block flex" should set the property value
Pass e.style['display'] = "grid block" should set the property value
Pass e.style['display'] = "block grid" should set the property value
Pass e.style['display'] = "table block" should set the property value
Pass e.style['display'] = "block table" should set the property value
Pass e.style['display'] = "block ruby" should set the property value
Pass e.style['display'] = "ruby block" should set the property value
Pass e.style['display'] = "block list-item" should set the property value
Pass e.style['display'] = "list-item block" should set the property value
Pass e.style['display'] = "flow block list-item" should set the property value
Pass e.style['display'] = "block flow list-item" should set the property value
Pass e.style['display'] = "flow list-item block" should set the property value
Pass e.style['display'] = "block list-item flow" should set the property value
Pass e.style['display'] = "list-item block flow" should set the property value
Pass e.style['display'] = "list-item flow block" should set the property value
Fail e.style['display'] = "flow-root block list-item" should set the property value
Fail e.style['display'] = "block flow-root list-item" should set the property value
Fail e.style['display'] = "flow-root list-item block" should set the property value
Fail e.style['display'] = "block list-item flow-root" should set the property value
Fail e.style['display'] = "list-item block flow-root" should set the property value
Fail e.style['display'] = "list-item flow-root block" should set the property value
Pass e.style['display'] = "inline flow" should set the property value
Pass e.style['display'] = "flow inline" should set the property value
Pass e.style['display'] = "flow-root inline" should set the property value
Pass e.style['display'] = "inline flow-root" should set the property value
Pass e.style['display'] = "flex inline" should set the property value
Pass e.style['display'] = "inline flex" should set the property value
Pass e.style['display'] = "grid inline" should set the property value
Pass e.style['display'] = "inline grid" should set the property value
Pass e.style['display'] = "table inline" should set the property value
Pass e.style['display'] = "inline table" should set the property value
Pass e.style['display'] = "inline ruby" should set the property value
Pass e.style['display'] = "ruby inline" should set the property value
Fail e.style['display'] = "inline list-item" should set the property value
Fail e.style['display'] = "list-item inline" should set the property value
Fail e.style['display'] = "flow inline list-item" should set the property value
Fail e.style['display'] = "inline flow list-item" should set the property value
Fail e.style['display'] = "flow list-item inline" should set the property value
Fail e.style['display'] = "inline list-item flow" should set the property value
Fail e.style['display'] = "list-item inline flow" should set the property value
Fail e.style['display'] = "list-item flow inline" should set the property value
Pass e.style['display'] = "flow-root inline list-item" should set the property value
Pass e.style['display'] = "inline flow-root list-item" should set the property value
Pass e.style['display'] = "flow-root list-item inline" should set the property value
Pass e.style['display'] = "inline list-item flow-root" should set the property value
Pass e.style['display'] = "list-item inline flow-root" should set the property value
Pass e.style['display'] = "list-item flow-root inline" should set the property value
Pass e.style['display'] = "run-in flow" should set the property value
Pass e.style['display'] = "flow run-in" should set the property value
Pass e.style['display'] = "flow-root run-in" should set the property value
Pass e.style['display'] = "run-in flow-root" should set the property value
Pass e.style['display'] = "flex run-in" should set the property value
Pass e.style['display'] = "run-in flex" should set the property value
Pass e.style['display'] = "grid run-in" should set the property value
Pass e.style['display'] = "run-in grid" should set the property value
Pass e.style['display'] = "table run-in" should set the property value
Pass e.style['display'] = "run-in table" should set the property value
Pass e.style['display'] = "run-in ruby" should set the property value
Pass e.style['display'] = "ruby run-in" should set the property value
Fail e.style['display'] = "run-in list-item" should set the property value
Fail e.style['display'] = "list-item run-in" should set the property value
Fail e.style['display'] = "flow run-in list-item" should set the property value
Fail e.style['display'] = "run-in flow list-item" should set the property value
Fail e.style['display'] = "flow list-item run-in" should set the property value
Fail e.style['display'] = "run-in list-item flow" should set the property value
Fail e.style['display'] = "list-item run-in flow" should set the property value
Fail e.style['display'] = "list-item flow run-in" should set the property value
Pass e.style['display'] = "flow-root run-in list-item" should set the property value
Pass e.style['display'] = "run-in flow-root list-item" should set the property value
Pass e.style['display'] = "flow-root list-item run-in" should set the property value
Pass e.style['display'] = "run-in list-item flow-root" should set the property value
Pass e.style['display'] = "list-item run-in flow-root" should set the property value
Pass e.style['display'] = "list-item flow-root run-in" should set the property value

View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass textarea has inline block display

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>display interpolation</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#display-prop">
<meta name="assert" content="display supports animation">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/interpolation-testcommon.js"></script>
<body>
<script>
test_not_animatable({
property: 'display',
from: 'none',
to: 'flex',
underlying: 'block'
});
</script>
</body>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>display interpolation</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#display-prop">
<meta name="assert" content="display supports animation">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/interpolation-testcommon.js"></script>
<body>
<script>
test_no_interpolation({
property: 'display',
from: 'grid',
to: 'flex',
underlying: 'block',
target_names: ['CSS Animations', 'Web Animations']
});
</script>
</body>

View file

@ -0,0 +1,34 @@
<!doctype html>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1561283">
<link rel="help" href="https://drafts.csswg.org/css-display/#valdef-display-contents">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-display">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="mailto:obrufau@igalia.com" title="Oriol Brufau">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.grid { display: grid }
</style>
<div style="display: grid">
<span id="grid-child">
<span></span>
</div>
</div>
<script>
function display(el) {
return getComputedStyle(el).display;
}
test(function() {
let child = document.getElementById("grid-child");
let grandChild = child.firstElementChild;
assert_equals(display(child), "block", "Grid child should get blockified");
assert_equals(display(grandChild), "inline", "Grid grand-child should not get initially blockified");
child.style.display = "contents";
assert_equals(display(child), "contents", "No reason for it not to become display: contents");
assert_equals(display(grandChild), "block", "Grid grand-child with display: contents parent should get blockified");
child.style.display = "";
assert_equals(display(child), "block", "Grid child should get blockified");
assert_equals(display(grandChild), "inline", "Grid grand-child should get un-blockified when its parent's display stops being `contents`");
}, "Dynamic changes to `display` causing blockification of children are handled correctly");
</script>

View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: Computed style for display:contents</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations">
<link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
html, .contents { display: contents }
#t2 .contents { background-color: green }
#t2 span { background-color: inherit }
#t3 .contents { color: green }
#t4 {
width: auto;
height: 50%;
margin-left: 25%;
padding-top: 10%;
}
</style>
<div id="t1" class="contents"></div>
<div id="t2">
<div class="contents">
<span></span>
</div>
</div>
<div id="t3">
<div class="contents">
<span></span>
</div>
</div>
<div id="t4" class="contents"></div>
<script>
test(function(){
assert_equals(getComputedStyle(document.querySelector("#t1")).display, "contents");
}, "Serialization of computed style value for display:contents");
test(function(){
assert_equals(getComputedStyle(document.querySelector("#t2 span")).backgroundColor, "rgb(0, 128, 0)");
}, "display:contents element as inherit parent - explicit inheritance");
test(function(){
assert_equals(getComputedStyle(document.querySelector("#t3 span")).color, "rgb(0, 128, 0)");
}, "display:contents element as inherit parent - implicit inheritance");
test(function(){
var computed = getComputedStyle(document.querySelector("#t4"));
assert_equals(computed.width, "auto");
assert_equals(computed.height, "50%");
assert_equals(computed.marginLeft, "25%");
assert_equals(computed.paddingTop, "10%");
}, "Resolved value should be computed value, not used value, for display:contents");
test(function(){
assert_equals(getComputedStyle(document.documentElement).display, "block");
}, "display:contents is blockified for root elements");
</script>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<title>CSS Test (Display): Elements with display:contents should be focusable</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#box-generation">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2632">
<link rel="help" href="https://github.com/whatwg/html/issues/1837">
<link rel="help" href="https://github.com/whatwg/html/pull/9425">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1366037">
<!--
This requirement may not be crystal-clear from CSS specs, but
discussion in https://github.com/w3c/csswg-drafts/issues/2632
concluded it was correct and that no spec changes were needed.
https://github.com/whatwg/html/pull/9425 makes this clearer in the
HTML spec.
-->
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#test { --test-var: test-not-focused; }
#test:focus { --test-var: test-focused; }
</style>
<div id="test" style="display: contents" tabindex="1">Hello</div>
<script>
test(
function() {
var e = document.getElementById("test");
var cs = getComputedStyle(e);
assert_not_equals(document.activeElement, e, "precondition");
assert_equals(cs.getPropertyValue("--test-var"), "test-not-focused", "precondition (style)");
e.focus();
assert_equals(document.activeElement, e, "e is now focused");
assert_equals(cs.getPropertyValue("--test-var"), "test-focused", "e is now focused (style)");
}, "element with display:contents is focusable");
</script>

View file

@ -0,0 +1,43 @@
<!doctype html>
<meta charset="utf-8">
<title>Tests that the 'contents' value for the 'display' property is correctly parsed</title>
<link rel="help" href="https://drafts.csswg.org/css-display/#box-generation">
<link rel="author" href="mailto:ecobos@igalia.com" title="Emilio Cobos Álvarez">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.contents {
display: contents;
}
.contents-then-block {
display: contents;
display: block;
}
.content {
display: content;
}
</style>
<div class="contents" id="contentsElement"></div>
<div class="content" id="bogusContentsElement"></div>
<div class="contents-then-block" id="contentsThenBlockElement"></div>
<script>
test(function() {
var contentsElement = document.getElementById("contentsElement");
var bogusContentsElement = document.getElementById("bogusContentsElement");
var contentsThenBlockElement = document.getElementById("contentsThenBlockElement");
assert_equals(getComputedStyle(contentsElement).getPropertyValue("display"), "contents");
assert_equals(getComputedStyle(bogusContentsElement).getPropertyValue("display"), "block");
assert_equals(getComputedStyle(contentsThenBlockElement).getPropertyValue("display"), "block");
var element = document.createElement("div");
document.body.appendChild(element);
assert_equals(getComputedStyle(element).getPropertyValue("display"), "block");
element.style.display = "contents";
assert_equals(getComputedStyle(element).getPropertyValue("display"), "contents");
element.style.display = "block";
assert_equals(getComputedStyle(element).getPropertyValue("display"), "block");
});
</script>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: display:contents on SVG anchor child</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-svg">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg>
<a>
<tspan style="display:contents;color:green">Text</tspan>
</a>
<text>
<a>
<tspan style="display:contents;color:green">Text</tspan>
</a>
</text>
</svg>
<script>
test(() => {}, "Loading this page should not cause a crash.");
</script>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: display:contents on SVG switch child</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-svg">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg>
<switch>
<tspan style="display:contents;color:green">Text</tspan>
</switch>
</svg>
<script>
test(() => {}, "Loading this page should not cause a crash.");
</script>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: first-line and first-letter pseudo-elements</title>
<link rel="help" href="https://www.w3.org/TR/css-display-3/#placement">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#t1::first-letter { float: left; display: flex; font-size: 30px }
#t2::first-letter { float: left; font-size: 30px }
#t3::first-letter { display: flex; font-size: 30px }
#t4::first-letter { font-size: 30px }
#t5::first-line { float: left; display: flex; font-size: 30px }
#t6::first-line { float: left; font-size: 30px }
#t7::first-line { display: flex; font-size: 30px }
#t8::first-line { font-size: 30px }
</style>
<div id="t1">First letter is float and flex.</div>
<div id="t2">First letter is float but not flex.</div>
<div id="t3">First letter is flex but not float.</div>
<div id="t4">First letter not float or flex.</div>
<div id="t5">First line is float and flex.</div>
<div id="t6">First line is float but not flex.</div>
<div id="t7">First line is flex but not float.</div>
<div id="t8">First line is not float or flex.</div>
<script>
function getFirstLetterDisplayFor(id) {
return window.getComputedStyle(document.getElementById(id), "::first-letter").display;
}
function getFirstLineDisplayFor(id) {
return window.getComputedStyle(document.getElementById(id), "::first-line").display;
}
test(function() {
assert_equals(getFirstLetterDisplayFor("t1"), "block");
assert_equals(getFirstLetterDisplayFor("t2"), "block");
assert_equals(getFirstLetterDisplayFor("t3"), "inline");
assert_equals(getFirstLetterDisplayFor("t4"), "inline");
assert_equals(getFirstLineDisplayFor("t5"), "inline");
assert_equals(getFirstLineDisplayFor("t6"), "inline");
assert_equals(getFirstLineDisplayFor("t7"), "inline");
assert_equals(getFirstLineDisplayFor("t8"), "inline");
}, "display of first-letter and first-line");
</script>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: reflowing a display:list-item on dom changes - non-zero height</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#list-items">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<ul>
<li id="item" style="background:green">
<div id="content" style="overflow:hidden">Text<div>
</li>
</ul>
<script>
test(function() {
document.body.offsetTop; // force layout
item.insertBefore(document.createTextNode("This text should have a green background"), item.firstChild);
content.innerHTML = "";
assert_not_equals(item.clientHeight, 0, "The height of the LI should not be 0px.");
}, "List item height after DOM change.");
</script>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>display: math display values on non-MathML compute to flow</title>
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="container">
<div data-expected="inline" style="display: math;"></div>
<div data-expected="inline" style="display: inline math;"></div>
<div data-expected="inline" style="display: math inline;"></div>
<div data-expected="block" style="display: block math;"></div>
<div data-expected="block" style="display: math block;"></div>
<svg data-expected="inline" style="display: math;"></svg>
<svg data-expected="inline" style="display: inline math;"></svg>
<svg data-expected="inline" style="display: math inline;"></svg>
<svg data-expected="block" style="display: block math;"></svg>
<svg data-expected="block" style="display: math block;"></svg>
</div>
<script>
Array.from(container.children).forEach(element => {
test(function() {
assert_equals(window.getComputedStyle(element).display,
element.getAttribute('data-expected'));
}, `computed display on <${element.localName} style="${element.getAttribute('style')}">`);
});
</script>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>display: math and inline-math on pseudo elements compute to flow</title>
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.inline::before { content: 'math'; display: math; }
.inline::after { content: 'math'; display: math; }
.block::before { content: 'math'; display: block math; }
.block::after { content: 'math'; display: block math; }
</style>
<div>
<div class="block"></div>
<math class="block"></math>
<math><mrow class="block"></mrow></math>
<div class="inline"></div>
<math class="inline"></math>
<math><mrow class="inline"></mrow></math>
</div>
<script>
Array.from(document.querySelectorAll('[class]')).forEach(element => {
test(function() {
assert_equals(window.getComputedStyle(element, "::before").display,
element.getAttribute('class'));
assert_equals(window.getComputedStyle(element, "::after").display,
element.getAttribute('class'));
}, `computed display on ::before and ::after for <${element.localName} class="${element.className}">`);
});
</script>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Computed float value of flex/grid items</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
<meta name="assert" content="computed float value of flex/grid items should be as specified">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="flex" style="display:flex;">
<div id="flex-item"></div>
</div>
<div id="grid" style="display:grid;">
<div id="grid-item">
</div>
<script>
function setFloatFor(id, float) {
document.getElementById(id).style.cssFloat = float;
}
function getFloatFor(id) {
return window.getComputedStyle(document.getElementById(id)).getPropertyValue("float");
}
function setDisplayBlock(id) {
document.getElementById(id).style.display = "block";
}
test(function() {
assert_equals(getFloatFor("flex-item"), "none");
assert_equals(getFloatFor("grid-item"), "none");
setFloatFor("flex-item", "left");
setFloatFor("grid-item", "right");
assert_equals(getFloatFor("flex-item"), "left");
assert_equals(getFloatFor("grid-item"), "right");
setDisplayBlock("grid");
setDisplayBlock("flex");
assert_equals(getFloatFor("flex-item"), "left");
assert_equals(getFloatFor("grid-item"), "right");
}, "computed style for float");
</script>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Computed float value of flex/grid items</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
<meta name="assert" content="computed float value of flex/grid items should be as specified">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div style="display:flex;">
<div id="flex-item" style="float:left;"></div>
</div>
<div style="display:grid;">
<div id="grid-item" style="float:right;"></div>
</div>
<script>
function getFloatFor(id) {
return window.getComputedStyle(document.getElementById(id)).getPropertyValue("float");
}
test(function() {
assert_equals(getFloatFor("flex-item"), "left");
assert_equals(getFloatFor("grid-item"), "right");
}, "computed style for float");
</script>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS display property</title>
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<meta name="assert" content="Property 'display' does not inherit.">
<meta name="assert" content="Property 'display' has initial value 'inline'.">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('display', 'inline', 'table');
</script>
</body>
</html>

View file

@ -0,0 +1,193 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display: getComputedStyle().display</title>
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop">
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">
<meta name="assert" content="position and float can change display computed value.">
<meta name="assert" content="display computed value is otherwise as specified.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
'use strict';
// https://drafts.csswg.org/css-grid-1/#grid-containers
test_computed_value("display", "grid");
test_computed_value("display", "inline-grid");
// https://drafts.csswg.org/css2/visuren.html#display-prop
test_computed_value("display", "inline");
test_computed_value("display", "block");
test_computed_value("display", "list-item");
test_computed_value("display", "inline-block");
test_computed_value("display", "table");
test_computed_value("display", "inline-table");
test_computed_value("display", "table-row-group");
test_computed_value("display", "table-header-group");
test_computed_value("display", "table-footer-group");
test_computed_value("display", "table-row");
test_computed_value("display", "table-column-group");
test_computed_value("display", "table-column");
test_computed_value("display", "table-cell");
test_computed_value("display", "table-caption");
test_computed_value("display", "none");
// https://drafts.csswg.org/css-flexbox-1/#flex-containers
test_computed_value("display", "flex");
test_computed_value("display", "inline-flex");
test_computed_value("display", "contents");
test_computed_value("display", "run-in");
test_computed_value("display", "flow", "block");
test_computed_value("display", "flow-root");
test_computed_value("display", "ruby");
test_computed_value("display", "ruby-base");
test_computed_value("display", "ruby-text");
test_computed_value("display", "flow list-item", "list-item");
test_computed_value("display", "list-item flow", "list-item");
test_computed_value("display", "flow-root list-item", "flow-root list-item");
test_computed_value("display", "list-item flow-root", "flow-root list-item");
test_computed_value("display", "block flow", "block");
test_computed_value("display", "flow block", "block");
test_computed_value("display", "flow-root block", "flow-root");
test_computed_value("display", "block flow-root", "flow-root");
test_computed_value("display", "flex block", "flex");
test_computed_value("display", "block flex", "flex");
test_computed_value("display", "grid block", "grid");
test_computed_value("display", "block grid", "grid");
test_computed_value("display", "table block", "table");
test_computed_value("display", "block table", "table");
test_computed_value("display", "block ruby", "block ruby");
test_computed_value("display", "ruby block", "block ruby");
test_computed_value("display", "block list-item", "list-item");
test_computed_value("display", "list-item block", "list-item");
test_computed_value("display", "flow block list-item", "list-item");
test_computed_value("display", "block flow list-item", "list-item");
test_computed_value("display", "flow list-item block", "list-item");
test_computed_value("display", "block list-item flow", "list-item");
test_computed_value("display", "list-item block flow", "list-item");
test_computed_value("display", "list-item flow block", "list-item");
test_computed_value("display", "flow-root block list-item", "flow-root list-item");
test_computed_value("display", "block flow-root list-item", "flow-root list-item");
test_computed_value("display", "flow-root list-item block", "flow-root list-item");
test_computed_value("display", "block list-item flow-root", "flow-root list-item");
test_computed_value("display", "list-item block flow-root", "flow-root list-item");
test_computed_value("display", "list-item flow-root block", "flow-root list-item");
test_computed_value("display", "inline flow", "inline");
test_computed_value("display", "flow inline", "inline");
test_computed_value("display", "flow-root inline", "inline-block");
test_computed_value("display", "inline flow-root", "inline-block");
test_computed_value("display", "flex inline", "inline-flex");
test_computed_value("display", "inline flex", "inline-flex");
test_computed_value("display", "grid inline", "inline-grid");
test_computed_value("display", "inline grid", "inline-grid");
test_computed_value("display", "table inline", "inline-table");
test_computed_value("display", "inline table", "inline-table");
test_computed_value("display", "inline ruby", "ruby");
test_computed_value("display", "ruby inline", "ruby");
test_computed_value("display", "inline list-item", "inline list-item");
test_computed_value("display", "list-item inline", "inline list-item");
test_computed_value("display", "flow inline list-item", "inline list-item");
test_computed_value("display", "inline flow list-item", "inline list-item");
test_computed_value("display", "flow list-item inline", "inline list-item");
test_computed_value("display", "inline list-item flow", "inline list-item");
test_computed_value("display", "list-item inline flow", "inline list-item");
test_computed_value("display", "list-item flow inline", "inline list-item");
test_computed_value("display", "flow-root inline list-item", "inline flow-root list-item");
test_computed_value("display", "inline flow-root list-item", "inline flow-root list-item");
test_computed_value("display", "flow-root list-item inline", "inline flow-root list-item");
test_computed_value("display", "inline list-item flow-root", "inline flow-root list-item");
test_computed_value("display", "list-item inline flow-root", "inline flow-root list-item");
test_computed_value("display", "list-item flow-root inline", "inline flow-root list-item");
test_computed_value("display", "run-in flow", "run-in");
test_computed_value("display", "flow run-in", "run-in");
test_computed_value("display", "flow-root run-in", "run-in flow-root");
test_computed_value("display", "run-in flow-root", "run-in flow-root");
test_computed_value("display", "flex run-in", "run-in flex");
test_computed_value("display", "run-in flex", "run-in flex");
test_computed_value("display", "grid run-in", "run-in grid");
test_computed_value("display", "run-in grid", "run-in grid");
test_computed_value("display", "table run-in", "run-in table");
test_computed_value("display", "run-in table", "run-in table");
test_computed_value("display", "run-in ruby", "run-in ruby");
test_computed_value("display", "ruby run-in", "run-in ruby");
test_computed_value("display", "run-in list-item", "run-in list-item");
test_computed_value("display", "list-item run-in", "run-in list-item");
test_computed_value("display", "flow run-in list-item", "run-in list-item");
test_computed_value("display", "run-in flow list-item", "run-in list-item");
test_computed_value("display", "flow list-item run-in", "run-in list-item");
test_computed_value("display", "run-in list-item flow", "run-in list-item");
test_computed_value("display", "list-item run-in flow", "run-in list-item");
test_computed_value("display", "list-item flow run-in", "run-in list-item");
test_computed_value("display", "flow-root run-in list-item", "run-in flow-root list-item");
test_computed_value("display", "run-in flow-root list-item", "run-in flow-root list-item");
test_computed_value("display", "flow-root list-item run-in", "run-in flow-root list-item");
test_computed_value("display", "run-in list-item flow-root", "run-in flow-root list-item");
test_computed_value("display", "list-item run-in flow-root", "run-in flow-root list-item");
test_computed_value("display", "list-item flow-root run-in", "run-in flow-root list-item");
// https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
function test_display_affected(property, value) {
const target = document.getElementById('target');
test(() => {
target.style[property] = value;
target.style.display = 'inline-table';
assert_equals(getComputedStyle(target).display, 'table', 'inline-table -> block');
const displayValues = [
'inline',
'table-row-group',
'table-column',
'table-column-group',
'table-header-group',
'table-footer-group',
'table-row',
'table-cell',
'table-caption',
'ruby-base',
'ruby-text',
'inline-block'
];
for (let displayValue of displayValues) {
target.style.display = displayValue;
assert_equals(getComputedStyle(target).display, 'block', displayValue + ' -> block');
}
target.style.display = 'inline-flex';
assert_equals(getComputedStyle(target).display, 'flex', 'inline-flex -> flex');
target.style.display = 'inline-grid';
assert_equals(getComputedStyle(target).display, 'grid', 'inline-grid -> grid');
// Other values are not affected.
target.style.display = 'list-item';
assert_equals(getComputedStyle(target).display, 'list-item', 'list-item -> list-item');
target.style.display = 'contents';
assert_equals(getComputedStyle(target).display, 'contents', 'contents -> contents');
target.style[property] = '';
target.style.display = '';
}, property + ' ' + value + ' affects computed display');
}
test_display_affected("position", "absolute");
test_display_affected("position", "fixed");
test_display_affected("float", "left");
test_display_affected("float", "right");
</script>
</body>
</html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display: parsing display with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop">
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
<meta name="assert" content="display supports only the spec grammar.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("display", "grid inline-grid");
test_invalid_value("display", "none grid");
test_invalid_value("display", "none flow");
test_invalid_value("display", "none ruby");
test_invalid_value("display", "none flow-root");
test_invalid_value("display", "none list-item");
test_invalid_value("display", "contents list-item");
test_invalid_value("display", "list-item contents");
test_invalid_value("display", "flow flow");
test_invalid_value("display", "block block");
test_invalid_value("display", "flow flow-root");
test_invalid_value("display", "flow-root flow-root");
test_invalid_value("display", "block inline");
test_invalid_value("display", "flex ruby");
test_invalid_value("display", "ruby flex");
test_invalid_value("display", "inline inline");
test_invalid_value("display", "flex flex");
test_invalid_value("display", "grid flex");
test_invalid_value("display", "ruby grid");
test_invalid_value("display", "flex grid");
test_invalid_value("display", "grid table");
test_invalid_value("display", "table flex");
test_invalid_value("display", "flex table");
test_invalid_value("display", "ruby table");
test_invalid_value("display", "table table");
test_invalid_value("display", "table flow-root");
test_invalid_value("display", "flow-root ruby");
test_invalid_value("display", "list-item list-item");
test_invalid_value("display", "list-item table");
test_invalid_value("display", "flex list-item");
test_invalid_value("display", "list-item grid");
test_invalid_value("display", "flow flow list-item");
test_invalid_value("display", "grid flow list-item");
test_invalid_value("display", "flow list-item flow");
test_invalid_value("display", "block list-item block");
test_invalid_value("display", "list-item flow-root flow");
test_invalid_value("display", "list-item block block");
test_invalid_value("display", "list-item block list-item");
test_invalid_value("display", "list-item flow-root list-item");
test_invalid_value("display", "list-item flow-root block list-item");
test_invalid_value("display", "list-item block flow-root list-item");
test_invalid_value("display", "block list-item flow-root list-item");
test_invalid_value("display", "flow-root list-item block list-item");
test_invalid_value("display", "list-item ruby");
test_invalid_value("display", "ruby list-item");
test_invalid_value("display", "ruby ruby");
test_invalid_value("display", "ruby flow");
test_invalid_value("display", "flow ruby");
test_invalid_value("display", "ruby flow-root");
test_invalid_value("display", "grid ruby");
test_invalid_value("display", "table ruby");
test_invalid_value("display", "table-row flow");
test_invalid_value("display", "flow table-row");
test_invalid_value("display", "table-row-group flow-root");
test_invalid_value("display", "flex table-row-group");
</script>
</body>
</html>

View file

@ -0,0 +1,141 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display: parsing display with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop">
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
<meta name="assert" content="display supports the full spec grammar.">
<meta name="assert" content="display supports the new values 'grid | inline-grid'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// https://drafts.csswg.org/css-grid-1/#grid-containers
test_valid_value("display", "grid");
test_valid_value("display", "inline-grid");
// https://drafts.csswg.org/css2/visuren.html#display-prop
test_valid_value("display", "inline");
test_valid_value("display", "block");
test_valid_value("display", "list-item");
test_valid_value("display", "inline-block");
test_valid_value("display", "table");
test_valid_value("display", "inline-table");
test_valid_value("display", "table-row-group");
test_valid_value("display", "table-header-group");
test_valid_value("display", "table-footer-group");
test_valid_value("display", "table-row");
test_valid_value("display", "table-column-group");
test_valid_value("display", "table-column");
test_valid_value("display", "table-cell");
test_valid_value("display", "table-caption");
test_valid_value("display", "none");
// https://drafts.csswg.org/css-flexbox-1/#flex-containers
test_valid_value("display", "flex");
test_valid_value("display", "inline-flex");
test_valid_value("display", "contents");
// https://drafts.csswg.org/css-display/#the-display-properties
test_valid_value("display", "run-in");
test_valid_value("display", "flow", "block");
test_valid_value("display", "flow-root");
test_valid_value("display", "ruby");
test_valid_value("display", "ruby-base");
test_valid_value("display", "ruby-text");
test_valid_value("display", "flow list-item", "list-item");
test_valid_value("display", "list-item flow", "list-item");
test_valid_value("display", "flow-root list-item", "flow-root list-item");
test_valid_value("display", "list-item flow-root", "flow-root list-item");
test_valid_value("display", "block flow", "block");
test_valid_value("display", "flow block", "block");
test_valid_value("display", "flow-root block", "flow-root");
test_valid_value("display", "block flow-root", "flow-root");
test_valid_value("display", "flex block", "flex");
test_valid_value("display", "block flex", "flex");
test_valid_value("display", "grid block", "grid");
test_valid_value("display", "block grid", "grid");
test_valid_value("display", "table block", "table");
test_valid_value("display", "block table", "table");
test_valid_value("display", "block ruby", "block ruby");
test_valid_value("display", "ruby block", "block ruby");
test_valid_value("display", "block list-item", "list-item");
test_valid_value("display", "list-item block", "list-item");
test_valid_value("display", "flow block list-item", "list-item");
test_valid_value("display", "block flow list-item", "list-item");
test_valid_value("display", "flow list-item block", "list-item");
test_valid_value("display", "block list-item flow", "list-item");
test_valid_value("display", "list-item block flow", "list-item");
test_valid_value("display", "list-item flow block", "list-item");
test_valid_value("display", "flow-root block list-item", "flow-root list-item");
test_valid_value("display", "block flow-root list-item", "flow-root list-item");
test_valid_value("display", "flow-root list-item block", "flow-root list-item");
test_valid_value("display", "block list-item flow-root", "flow-root list-item");
test_valid_value("display", "list-item block flow-root", "flow-root list-item");
test_valid_value("display", "list-item flow-root block", "flow-root list-item");
test_valid_value("display", "inline flow", "inline");
test_valid_value("display", "flow inline", "inline");
test_valid_value("display", "flow-root inline", "inline-block");
test_valid_value("display", "inline flow-root", "inline-block");
test_valid_value("display", "flex inline", "inline-flex");
test_valid_value("display", "inline flex", "inline-flex");
test_valid_value("display", "grid inline", "inline-grid");
test_valid_value("display", "inline grid", "inline-grid");
test_valid_value("display", "table inline", "inline-table");
test_valid_value("display", "inline table", "inline-table");
test_valid_value("display", "inline ruby", "ruby");
test_valid_value("display", "ruby inline", "ruby");
test_valid_value("display", "inline list-item", "inline list-item");
test_valid_value("display", "list-item inline", "inline list-item");
test_valid_value("display", "flow inline list-item", "inline list-item");
test_valid_value("display", "inline flow list-item", "inline list-item");
test_valid_value("display", "flow list-item inline", "inline list-item");
test_valid_value("display", "inline list-item flow", "inline list-item");
test_valid_value("display", "list-item inline flow", "inline list-item");
test_valid_value("display", "list-item flow inline", "inline list-item");
test_valid_value("display", "flow-root inline list-item", "inline flow-root list-item");
test_valid_value("display", "inline flow-root list-item", "inline flow-root list-item");
test_valid_value("display", "flow-root list-item inline", "inline flow-root list-item");
test_valid_value("display", "inline list-item flow-root", "inline flow-root list-item");
test_valid_value("display", "list-item inline flow-root", "inline flow-root list-item");
test_valid_value("display", "list-item flow-root inline", "inline flow-root list-item");
test_valid_value("display", "run-in flow", "run-in");
test_valid_value("display", "flow run-in", "run-in");
test_valid_value("display", "flow-root run-in", "run-in flow-root");
test_valid_value("display", "run-in flow-root", "run-in flow-root");
test_valid_value("display", "flex run-in", "run-in flex");
test_valid_value("display", "run-in flex", "run-in flex");
test_valid_value("display", "grid run-in", "run-in grid");
test_valid_value("display", "run-in grid", "run-in grid");
test_valid_value("display", "table run-in", "run-in table");
test_valid_value("display", "run-in table", "run-in table");
test_valid_value("display", "run-in ruby", "run-in ruby");
test_valid_value("display", "ruby run-in", "run-in ruby");
test_valid_value("display", "run-in list-item", "run-in list-item");
test_valid_value("display", "list-item run-in", "run-in list-item");
test_valid_value("display", "flow run-in list-item", "run-in list-item");
test_valid_value("display", "run-in flow list-item", "run-in list-item");
test_valid_value("display", "flow list-item run-in", "run-in list-item");
test_valid_value("display", "run-in list-item flow", "run-in list-item");
test_valid_value("display", "list-item run-in flow", "run-in list-item");
test_valid_value("display", "list-item flow run-in", "run-in list-item");
test_valid_value("display", "flow-root run-in list-item", "run-in flow-root list-item");
test_valid_value("display", "run-in flow-root list-item", "run-in flow-root list-item");
test_valid_value("display", "flow-root list-item run-in", "run-in flow-root list-item");
test_valid_value("display", "run-in list-item flow-root", "run-in flow-root list-item");
test_valid_value("display", "list-item run-in flow-root", "run-in flow-root list-item");
test_valid_value("display", "list-item flow-root run-in", "run-in flow-root list-item");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display of textarea</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700535">
<link rel="help" href="https://github.com/whatwg/html/issues/4082">
<meta name="assert" content="textarea has inline block display.">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<textarea id="t"></textarea>
<script>
test(
function(){
var target = document.getElementById("t");
assert_equals(getComputedStyle(target).display, "inline-block");
}, "textarea has inline block display");
</script>
</body>
</html>