FilesExpand file tree

master

/

table-grid-item-005.html

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

60 lines (50 loc) · 1.2 KB

master

/

table-grid-item-005.html

Copy path

Top

File metadata and controls

• Code
• Blame

60 lines (50 loc) · 1.2 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

<!doctype html>

<meta charset="utf-8">

<title>Table sizing inside a fixed sized grid</title>

<link rel="help" href="https://crbug.com/667785">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

.grid {

display: grid;

width: 400px;

height: 400px;

border: 1px solid black;

background: red;

}

.item {

display: table;

background: lime;

}

caption {

background: grey;

}

</style>

<pre>There should be no red areas:</pre>

<p>Table with one cell</p>

<div class="grid">

<div class="item">

table cell

</div>

</div>

<p>Empty table with caption</p>

<div class="grid">

<table class="item">

<caption>caption</caption>

</table>

</div>

<p>Table with caption and cell</p>

<div class="grid">

<table class="item">

<caption>caption</caption>

<tr><td>table cell</td></tr>

</table>

</div>

<script>

test(_ => {

for (let t of Array.from(document.body.querySelectorAll(".item"))) {

assert_equals(t.offsetWidth, 400, "table is as wide as the grid");

assert_equals(t.offsetHeight, 400, "table is as tall as the grid");

}

}, "<table> grid items should fill their grid area");

</script>