summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-shapes/shape-outside
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes/shape-outside')
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-circle.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-image.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-inset.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-polygon.html33
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-should-push.html77
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html22
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-should-push-ref.html72
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/reference/shape-outside-formatting-context-ref.html26
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/shape-outside-formatting-context.tentative.html31
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html43
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html11
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html66
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html72
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html36
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html36
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html37
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html45
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html59
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html59
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html59
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html59
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html60
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html60
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html76
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html75
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html32
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html32
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html21
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html42
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html32
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html32
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html32
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html42
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html35
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html40
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html41
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html41
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html41
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html79
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html79
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html79
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html42
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html41
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html41
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html41
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html67
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html40
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gifbin0 -> 867 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.pngbin0 -> 2959 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg3
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.pngbin0 -> 17836 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg3
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.pngbin0 -> 17836 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg3
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpgbin0 -> 13177 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.pngbin0 -> 17835 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg3
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.pngbin0 -> 18308 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.pngbin0 -> 2952 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.pngbin0 -> 17396 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg3
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gifbin0 -> 320 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpgbin0 -> 19820 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.pngbin0 -> 17395 bytes
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg3
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-023-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-032-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-033-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-034-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-035-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-036-ref.html45
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-041-ref.html45
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-042-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-047-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-048-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-049-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-050-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-051-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-052-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-053-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-054-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-055-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-056-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-014.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-015.html72
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-016.html72
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-017.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-018.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-019.html73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-020.html73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-021.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-022.html73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-025.html73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-026.html73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-028.html75
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-029.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-030.html60
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-031.html60
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-033.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-034.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-035.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-036.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-041.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.html50
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-047.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-049.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-051.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-052.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-053.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-055.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-056.html83
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-integer-overflow-crash.html17
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-013-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-021-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html66
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-032-ref.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-033-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-034-ref.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-035-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-036-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-037-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-038-ref.html45
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-039-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-040-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-042-ref.html45
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-044-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-045-ref.html45
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-046-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-047-ref.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-048-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-049-ref.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-050-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-051-ref.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-052-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-013.html68
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-014.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-015.html73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-017.html75
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-018.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-019.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-020.html73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-021.html75
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-022.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-023.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-024.html74
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-025.html75
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-030.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-033.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-034.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-035.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-040.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-041.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-042.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-043.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-044.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-045.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-046.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-047.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-048.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-049.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-050.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-051.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-052.html81
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-integer-overflow-crash.html13
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html19
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-016-ref.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-017-ref.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-020-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-021-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-022-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-023-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-024-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-025-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-026-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-027-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-010.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-011.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-012.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-013.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-014.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-015.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-016.html50
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-017.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-020.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-021.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-022.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-023.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-024.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-025.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-026.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-027.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html68
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-031.html60
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-refcrash.html19
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-017-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-018-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-019-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-020-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-021-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-022-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-023-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-024-ref.html51
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-025-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-032-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html66
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-008.html66
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-009.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-010.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-011.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-012.html76
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-013.html76
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-014.html76
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-015.html75
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-016.html61
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html83
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-018.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-019.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-020.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-021.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-022.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-023.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-024.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-025.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-032.html91
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-crash.html20
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/rounded-rectangle.js73
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/subpixel-utils.js26
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/test-utils.js27
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html41
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html30
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html36
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html43
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html30
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html59
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html24
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html31
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html29
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html31
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html115
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html42
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html50
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html124
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html35
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html38
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html24
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html31
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html29
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html34
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html32
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html156
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html50
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html124
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html76
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html26
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html20
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html32
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html36
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html59
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html42
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html82
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html40
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html42
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html72
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html42
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html68
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html35
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html27
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html27
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html40
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js892
422 files changed, 22278 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-circle.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-circle.html
new file mode 100644
index 0000000000..fe0b82ab6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-circle.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- circle</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="reference/float-retry-push-ref.html">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside circle until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ shape-outside: circle(70.710678px at 0px 0px);
+ /* 70.710678 = 50 / (sqrt(2) / 2) */
+ }
+</style>
+
+<div style="width: 300px; height: 100px;">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-image.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-image.html
new file mode 100644
index 0000000000..aed064d9c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-image.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- image</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="reference/float-retry-push-ref.html">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside image until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 21px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ /* We use a gradient, which is part of the CSS 'image' type.
+ * We set it up to create a hard diagonal edge from the bottom left to the
+ * top right of #shape, which slices through each pixel along the diagonal.
+ * Theoretically, this should place #too-wide at position 50,50 within
+ * #shape's 100x100 region, but on some devices, the gradient rasterization
+ * may leave pixel 50,49 unshaded enough that #too-wide is placed there
+ * instead. To account for that possible off-by-one rounding scenario,
+ * we set things up as follows:
+ * - We make #too-wide 1px taller than the corresponding content in the
+ * reference case.
+ * - We clip the outermost div using a 'clip-path' that only paints
+ * the region where the corresponding content is in the reference case.
+ * - If the testcase renders properly, then #too-wide will have 1px of
+ * content clipped off of its top or bottom (depending on how the
+ * linear-gradient rasterization and rounding works out). Either way,
+ * it'll match the reference case.
+ */
+ shape-outside: linear-gradient(135deg, black, black 50%, transparent 50%);
+ }
+ .clip {
+ clip-path: inset(50px 0 30px 0px);
+ }
+</style>
+
+<div style="width: 300px; height: 100px;" class="clip">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-inset.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-inset.html
new file mode 100644
index 0000000000..ba339e6d6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-inset.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- inset</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="reference/float-retry-push-ref.html">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside inset until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ shape-outside: inset(0px 40px 40px 0px round 0 0 34.142136px 0);
+ /* 34.142136 = 10 / (1 - (sqrt(2) / 2)) */
+ }
+</style>
+
+<div style="width: 300px; height: 100px;">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-polygon.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-polygon.html
new file mode 100644
index 0000000000..9fc0330630
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-polygon.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- polygon</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="reference/float-retry-push-ref.html">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside polygon until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ shape-outside: polygon(0px 0px, 100px 0px, 0px 100px);
+ }
+</style>
+
+<div style="width: 300px; height: 100px;">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-should-push.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-should-push.html
new file mode 100644
index 0000000000..4901b8b5c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-should-push.html
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Ensure shape-outside floats that don't cover their margin-rect affect layout properly</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="reference/float-should-push-ref.html">
+<meta name="assert" content="Test that a too-wide inline block clear floats defined by shape-outside shapes that don't reach the top of the margin rect.">
+
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ .container {
+ width: 300px;
+ height: 100px;
+ background: lightgray;
+ }
+
+ .too-wide {
+ display: inline-block;
+ width: 250px;
+ height: 20px;
+ background: lightblue;
+ }
+
+ .shape {
+ background: black;
+ width: 100px;
+ height: 100px;
+ float: left;
+ }
+
+ .spacer {
+ clear: left;
+ height: 30px;
+ }
+
+ .inset {
+ background: orange;
+ shape-outside: inset(1px 0px 0px 0px);
+ }
+
+ .polygon {
+ background: pink;
+ shape-outside: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
+ }
+
+ .image {
+ background: brown;
+ shape-outside: linear-gradient(0deg, black, black 100%);
+ }
+
+</style>
+
+<p>All light blue bars should be pushed below the square floats, regardless of how those floats are defined.</p>
+
+<div class="container">
+<div class="shape inset">inset(1px) at top</div>
+<span class="too-wide"></span>
+</div>
+
+<div class="spacer"></div>
+
+<div class="container">
+<div class="shape polygon">polygon</div>
+<span class="too-wide"></span>
+</div>
+
+<div class="spacer"></div>
+
+<div class="container">
+<div class="shape image">image</div>
+<span class="too-wide"></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html
new file mode 100644
index 0000000000..2b0fabbda7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Reference for retrying floats and pushing them partway down the float area</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+</style>
+
+<div style="width: 300px; height: 100px">
+<span id="too-wide" style="margin-top: 50px; margin-left: 50px;"></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-should-push-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-should-push-ref.html
new file mode 100644
index 0000000000..6a349fd359
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-should-push-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Reference: Ensure shape-outside floats that don't cover their margin-rect affect layout properly</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ .container {
+ width: 300px;
+ height: 100px;
+ background: lightgray;
+ }
+
+ .too-wide {
+ display: inline-block;
+ width: 250px;
+ height: 20px;
+ background: lightblue;
+ clear: left;
+ }
+
+ .shape {
+ background: black;
+ width: 100px;
+ height: 100px;
+ float: left;
+ }
+
+ .spacer {
+ clear: left;
+ height: 30px;
+ }
+
+ .inset {
+ background: orange;
+ }
+
+ .polygon {
+ background: pink;
+ }
+
+ .image {
+ background: brown;
+ }
+
+</style>
+
+<p>All light blue bars should be pushed below the square floats, regardless of how those floats are defined.</p>
+
+<div class="container">
+<div class="shape inset">inset(1px) at top</div>
+<span class="too-wide"></span>
+</div>
+
+<div class="spacer"></div>
+
+<div class="container">
+<div class="shape polygon">polygon</div>
+<span class="too-wide"></span>
+</div>
+
+<div class="spacer"></div>
+
+<div class="container">
+<div class="shape image">image</div>
+<span class="too-wide"></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/reference/shape-outside-formatting-context-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/reference/shape-outside-formatting-context-ref.html
new file mode 100644
index 0000000000..2fd6df9819
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/reference/shape-outside-formatting-context-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+.test {
+ width: 200px;
+ overflow: hidden;
+}
+
+.float {
+ float: left;
+ width: 50%;
+ height: 100px;
+
+ background: orange;
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.flex {
+ display: flex;
+ height: 50px;
+ background: rebeccapurple;
+}
+</style>
+<div class="test">
+ <div class="float"></div>
+ <div class="flex"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/shape-outside-formatting-context.tentative.html b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/shape-outside-formatting-context.tentative.html
new file mode 100644
index 0000000000..cfb5d46a0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/shape-outside-formatting-context.tentative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/shape-outside-formatting-context-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-shapes/">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1970">
+<meta name="assert" content="The test verifies that a new formatting context does *not* get sized and positioned based off the float area (defined by shape outside).">
+<style>
+.test {
+ width: 200px;
+ overflow: hidden;
+}
+
+.float {
+ float: left;
+ width: 50%;
+ height: 100px;
+
+ background: orange;
+ shape-outside: polygon(0 0, 100% 100%, 0 100%);
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.flex {
+ display: flex;
+ height: 50px;
+ background: rebeccapurple;
+}
+</style>
+<div class="test">
+ <div class="float"></div>
+ <div class="flex"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html
new file mode 100644
index 0000000000..ea248f1457
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin-left: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html
new file mode 100644
index 0000000000..f7137463d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin-right: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html
new file mode 100644
index 0000000000..d6d061dc1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, border-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
+ <div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
+ <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html
new file mode 100644
index 0000000000..f66a499116
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, border-box, border-radius, no margin reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html
new file mode 100644
index 0000000000..4639acc920
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, border-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
+ <div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
+ <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html
new file mode 100644
index 0000000000..bb9bdcb82d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, border-box, border-radius, no margin reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html
new file mode 100644
index 0000000000..f0e0305caa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ border-bottom-right-radius: 50%;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html
new file mode 100644
index 0000000000..3f6cf9762f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ border-top-right-radius: 50%;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html
new file mode 100644
index 0000000000..0d137557c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ border-bottom-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html
new file mode 100644
index 0000000000..964b38949a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ border-top-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html
new file mode 100644
index 0000000000..1fd0a1d9b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-rl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ border-bottom-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html
new file mode 100644
index 0000000000..c96d926d62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-rl;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ border-top-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html
new file mode 100644
index 0000000000..667cdf9b94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ border-top-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html
new file mode 100644
index 0000000000..683c4590ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, border-box, border-bottom-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ border-bottom-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html
new file mode 100644
index 0000000000..628cf3d588
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 198px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 200px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html
new file mode 100644
index 0000000000..092840901f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 100px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 60px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html
new file mode 100644
index 0000000000..53c10c892f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, content-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: content-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding-left: 25px;
+ border-left: 25px solid lightgreen;
+ margin-left: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 50px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html
new file mode 100644
index 0000000000..aa9c34ce92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, content-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: content-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding-right: 25px;
+ border-right: 25px solid lightgreen;
+ margin-right: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 50px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html
new file mode 100644
index 0000000000..0c77300522
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, content-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: content-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 120px;
+ width: 120px;
+ padding: 10px;
+ border: 5px solid lightgreen;
+ margin: 5px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
+ <div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
+ <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html
new file mode 100644
index 0000000000..c3dc6de8d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, content-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: content-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 120px;
+ width: 120px;
+ padding: 10px;
+ border: 5px solid lightgreen;
+ margin: 5px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
+ <div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
+ <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html
new file mode 100644
index 0000000000..55c7960876
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: margin-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html
new file mode 100644
index 0000000000..3806e09993
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, margin-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: margin-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html
new file mode 100644
index 0000000000..8b7e2955f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: margin-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html
new file mode 100644
index 0000000000..d24afcd711
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: margin-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html
new file mode 100644
index 0000000000..aa74b16469
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, margin-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: margin-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html
new file mode 100644
index 0000000000..a96f6c30de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, margin-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: margin-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html
new file mode 100644
index 0000000000..73e4e91096
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-top-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: margin-box; */
+ border-top-right-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html
new file mode 100644
index 0000000000..16ed0e5578
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-bottom-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: margin-box; */
+ border-bottom-right-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; left: 120px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; left: 120px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html
new file mode 100644
index 0000000000..2c6cc1db9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .bfc {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ direction: ltr;
+ }
+
+ .container {
+ direction: rtl;
+ unicode-bidi: bidi-override;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: margin-box; */
+ border-top-right-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="bfc">
+ <span class="container">
+ <div class="shape"></div>
+ </span>
+ <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> <!-- Box at corner -->
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html
new file mode 100644
index 0000000000..7cf8fafc93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .bfc {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ direction: rtl;
+ }
+
+ .container {
+ direction: ltr;
+ unicode-bidi: bidi-override;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: margin-box; */
+ border-top-left-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="bfc">
+ <span class="container">
+ <div class="shape"></div>
+ </span>
+ <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; right: 120px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; right: 120px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html
new file mode 100644
index 0000000000..0aa6993e37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, padding-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: padding-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border-left: 25px solid lightgreen;
+ margin-left: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html
new file mode 100644
index 0000000000..8459758e50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, padding-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: padding-box; */
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border-right: 25px solid lightgreen;
+ margin-right: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html
new file mode 100644
index 0000000000..a5cb5e82a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+#shape {
+ margin-left: 25px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+}
+</style>
+<p>The test passes if there is a green square and no red.</p>
+<div id="shape"></div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html
new file mode 100644
index 0000000000..88abbd73f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, padding-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside: border-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 40px;
+ border: 10px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
+ <div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
+ <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html
new file mode 100644
index 0000000000..b15f4e275b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, padding-box, border-radius reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside: border-box; */
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 40px;
+ border: 10px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ position: absolute;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
+ <div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
+ <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html
new file mode 100644
index 0000000000..9bcadb121d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: border-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html
new file mode 100644
index 0000000000..de942dc69d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: border-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html
new file mode 100644
index 0000000000..fd97e01202
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>CSS Test: right float, shape-outside:border-box and shape-margin</title>
+<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/>
+<meta name="flags" content="ahem" />
+<meta name="assert" content="The test verfies a shape with shape-outside:border-box
+ and shape-margin has rounded corners.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ margin-left: 25px;
+}
+#test-container {
+ /* Allow at most 1.5 glyphs to overflow the left edge of #container. */
+ margin-left: -30px;
+ width: 230px;
+ height: 200px;
+ font: 20px/1 Ahem;
+ background-color: red;
+ color: green;
+ text-align: right;
+}
+#test-shape {
+ float: right;
+ width: 15px;
+ height: 10px;
+ margin: 95px 65px 95px 120px;
+ shape-margin: 70px;
+ shape-outside: border-box;
+}
+#static-shape {
+ position: absolute;
+ left: 50px;
+ top: 20px;
+ width: 150px;
+ height: 160px;
+ background-color: green;
+}
+</style>
+<p>The test passes if there is a green square and no red.</p>
+<div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
+ <div id="static-shape"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html
new file mode 100644
index 0000000000..863e3c000d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, border-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: border-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html
new file mode 100644
index 0000000000..5b2837187e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, border-box, border-radius, no margin</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: border-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ /* No margin. */
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html
new file mode 100644
index 0000000000..ff0960fc19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, border-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-003-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: border-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html
new file mode 100644
index 0000000000..0a7dee8caa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, border-box, border-radius, no margin</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-004-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: border-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ /* No margin. */
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html
new file mode 100644
index 0000000000..8bd2113921
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-005-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: border-box;
+ border-bottom-right-radius: 50%;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html
new file mode 100644
index 0000000000..4afe1d42c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-006-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: border-box;
+ border-top-right-radius: 50%;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html
new file mode 100644
index 0000000000..4a55ad0364
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-007-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: border-box;
+ border-bottom-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html
new file mode 100644
index 0000000000..de0c5d5dce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-008-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: border-box;
+ border-top-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html
new file mode 100644
index 0000000000..27119bf33a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-009-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under sideways-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-rl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: border-box;
+ border-bottom-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html
new file mode 100644
index 0000000000..dcb60fc495
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-010-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under sideways-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-rl;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: border-box;
+ border-top-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html
new file mode 100644
index 0000000000..c604857c9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-011-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-top-right-radius value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: border-box;
+ border-top-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html
new file mode 100644
index 0000000000..70b16559a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, border-box, border-bottom-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-border-box-border-radius-012-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-bottom-right-radius value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: border-box;
+ border-bottom-right-radius: 60px 40px;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ inline-size: 200px;
+ block-size: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html
new file mode 100644
index 0000000000..76a9bbb152
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, shape-outside: content-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-box-001-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ the content box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 170px;
+ height: 170px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: content-box;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 198px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 200px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html
new file mode 100644
index 0000000000..c58152efb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, shape-outside: border-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-box-001-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ the border box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 150px;
+ height: 150px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: border-box;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 198px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 200px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html
new file mode 100644
index 0000000000..dd2030d9cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, shape-outside: padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-box-001-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ the padding box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 160px;
+ height: 160px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: padding-box;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 198px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 200px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html
new file mode 100644
index 0000000000..9465b5197e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, shape-outside: content-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-box-005-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ the content box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ text-align: right;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 170px;
+ height: 170px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: content-box;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 100px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 60px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html
new file mode 100644
index 0000000000..cc88efaf04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, shape-outside: border-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-box-005-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ the border box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ text-align: right;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 150px;
+ height: 150px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: border-box;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 100px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 60px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html
new file mode 100644
index 0000000000..3b3e58f0dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, shape-outside: padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-box-005-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ the padding box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ text-align: right;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 160px;
+ height: 160px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: padding-box;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 100px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 60px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html
new file mode 100644
index 0000000000..3216a76155
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, shape-outside: border-box</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-box-005-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ the border box, with negative margins.
+ The float area is clipped to the margin box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ text-align: right;
+ width: 250px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 150px;
+ height: 150px;
+ margin: -20px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: border-box;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 100px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 60px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html
new file mode 100644
index 0000000000..a6558ae41b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, content-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-content-box-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box value.">
+ <style>
+ .container {
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: content-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 50px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html
new file mode 100644
index 0000000000..f20457781e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <title>CSS Shape Test: float right, content-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-content-box-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: content-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 50px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the padding space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html
new file mode 100644
index 0000000000..5ad0463bef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Test: right float, shape-outside:content-box and shape-margin</title>
+<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/>
+<meta name="flags" content="ahem" />
+<meta name="assert" content="The test verfies a shape with shape-outside:content-box
+ and shape-margin has rounded corners.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ margin-left: 25px;
+}
+#test-container {
+ /* Allow at most 1.5 glyphs to overflow the left edge of #container. */
+ margin-left: -30px;
+ width: 230px;
+ height: 200px;
+ font: 20px/1 Ahem;
+ color: green;
+ background-color: red;
+ text-align: right;
+}
+#test-shape {
+ margin-left: 30px;
+ float: right;
+ box-sizing: border-box;
+ width: 200px;
+ height: 200px;
+ padding: 95px 40px 95px 120px;
+ shape-margin: 70px;
+ shape-outside: content-box;
+}
+#static-shape {
+ position: absolute;
+ left: 50px;
+ top: 20px;
+ width: 150px;
+ height: 160px;
+ background-color: green;
+}
+</style>
+<p>The test passes if there is a green square and no red.</p>
+<div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
+ <div id="static-shape"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html
new file mode 100644
index 0000000000..90bc2d3a57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, content-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-content-box-border-radius-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box and border-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: content-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 120px;
+ width: 120px;
+ padding: 10px;
+ border: 5px solid lightgreen;
+ margin: 5px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html
new file mode 100644
index 0000000000..aeae55ca23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, content-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-content-box-border-radius-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box and border-radius value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: content-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 120px;
+ width: 120px;
+ padding: 10px;
+ border: 5px solid lightgreen;
+ margin: 5px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html
new file mode 100644
index 0000000000..b8977a92a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: margin-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html
new file mode 100644
index 0000000000..09d4e57aca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, margin-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: margin-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html
new file mode 100644
index 0000000000..c2a21fc520
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: margin-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html
new file mode 100644
index 0000000000..96b162e904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: margin-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html
new file mode 100644
index 0000000000..f1b7f550fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, margin-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-003-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: margin-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html
new file mode 100644
index 0000000000..26f000fc9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, margin-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-004-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: margin-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html
new file mode 100644
index 0000000000..39d2a87e9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-top-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-005-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-top-right-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: margin-box;
+ border-top-right-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html
new file mode 100644
index 0000000000..8cce6f1831
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, margin-box, border-bottom-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-006-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-bottom-right-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: margin-box;
+ border-bottom-right-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html
new file mode 100644
index 0000000000..61143a8fe5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-007-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape in rtl container defined by the margin-box and border-top-right-radius value.">
+ <style>
+ .bfc {
+ width: 200px;
+ line-height: 0;
+ direction: ltr;
+ }
+
+ .container {
+ direction: rtl;
+ unicode-bidi: bidi-override;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: margin-box;
+ border-top-right-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <body class="bfc">
+ <span class="container">
+ <div class="shape"></div>
+ </span>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html
new file mode 100644
index 0000000000..ddae6453d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-margin-box-border-radius-008-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape in ltr container defined by the margin-box and border-top-left-radius value.">
+ <style>
+ .bfc {
+ width: 200px;
+ line-height: 0;
+ direction: rtl;
+ }
+
+ .container {
+ direction: ltr;
+ unicode-bidi: bidi-override;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: margin-box;
+ border-top-left-radius: 50%;
+ box-sizing: content-box;
+ height: 20px;
+ width: 20px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="bfc">
+ <span class="container">
+ <div class="shape"></div>
+ </span>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html
new file mode 100644
index 0000000000..0eee6fb41e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, padding-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-padding-box-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box value.">
+ <style>
+ .container {
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: padding-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html
new file mode 100644
index 0000000000..eb298dee2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <title>CSS Shape Test: float right, padding-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-padding-box-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 175px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: padding-box;
+ box-sizing: content-box;
+ height: 25px;
+ width: 25px;
+ padding: 25px;
+ border: 25px solid lightgreen;
+ margin: 25px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 175px;
+ height: 25px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="box"></div>
+ <div class="longbox"></div> <!-- Saturate the border space -->
+ <div class="longbox"></div> <!-- Saturate the margin space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html
new file mode 100644
index 0000000000..d816be13e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>CSS Test: right float, shape-outside:padding-box and shape-margin</title>
+<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/>
+<meta name="flags" content="ahem" />
+<meta name="assert" content="The test verfies a shape with shape-outside:padding-box
+ and shape-margin has rounded corners.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ margin-left: 25px;
+}
+#test-container {
+ /* Allow at most 1.5 glyphs to overflow the left edge of #container. */
+ margin-left: -30px;
+ width: 230px;
+ height: 200px;
+ font: 20px/1 Ahem;
+ background-color: red;
+ color: green;
+ text-align: right;
+}
+#test-shape {
+ margin-left: 30px;
+ float: right;
+ box-sizing: border-box;
+ width: 200px;
+ height: 200px;
+ border-width: 95px 40px 95px 120px;
+ border-style: solid;
+ border-color: transparent;
+ shape-margin: 70px;
+ shape-outside: padding-box;
+}
+#static-shape {
+ position: absolute;
+ left: 50px;
+ top: 20px;
+ width: 150px;
+ height: 160px;
+ background-color: green;
+}
+</style>
+<p>The test passes if there is a green square and no red.</p>
+<div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
+ <div id="static-shape"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html
new file mode 100644
index 0000000000..8b775c1526
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, padding-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-padding-box-border-radius-001-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box and border-radius value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: padding-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 40px;
+ border: 10px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html
new file mode 100644
index 0000000000..ba603db912
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, padding-box, border-radius</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-padding-box-border-radius-002-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box and border-radius value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: padding-box;
+ border-radius: 50%;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 40px;
+ border: 10px solid lightgreen;
+ margin: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .longbox {
+ display: inline-block;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="longbox"></div> <!-- Saturate the margin and border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html
new file mode 100644
index 0000000000..cbde336e9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: left;
+ width: 100px;
+ height: 200px;
+ background-color: green;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="gradient"></div>
+ xx xx xx xx
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html
new file mode 100644
index 0000000000..d6a65180fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: right;
+ width: 100px;
+ height: 200px;
+ background-color: green;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="gradient"></div>
+ xx xx xx xx
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html
new file mode 100644
index 0000000000..7a02119981
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"/>
+ <style type="text/css">
+ .square {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ line-height: 100px;
+ background-color: green;
+ }
+ #test {
+ position: absolute;
+ top: 70px;
+ width: 200px;
+ font-size: 0px;
+ }
+ #test > .right {
+ margin-left: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if there are four green squares alternating left and right. There
+ should be no red.
+ </p>
+ <div id="test">
+ <div class="square"></div><br>
+ <div class="square right"></div><br>
+ <div class="square"></div><br>
+ <div class="square right"></div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html
new file mode 100644
index 0000000000..148b5cd6ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Left float with linear gradient</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a
+ simple linear gradient."/>
+ <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8700"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: left;
+ width: 200px;
+ height: 200px;
+ background: linear-gradient(to right, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to right, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.5) 50%, transparent 50%);
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="gradient"></div>
+ xx xx xx xx
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html
new file mode 100644
index 0000000000..2b17a3f81e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Right float with linear gradient</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-002-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a
+ simple linear gradient on a right float."/>
+ <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8700"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: right;
+ width: 200px;
+ height: 200px;
+ background: linear-gradient(to left, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to left, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.75) 50%, rgba(51, 51, 51, 0.25) 50%, transparent 100%);
+ shape-image-threshold: 0.5;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="gradient"></div>
+ xx xx xx xx
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html
new file mode 100644
index 0000000000..e3f38a3c78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Right float with linear gradient</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-002-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a
+ simple linear gradient on a right float with
+ shape-margin applied."/>
+ <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8700"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: right;
+ width: 200px;
+ height: 200px;
+ background: linear-gradient(to left, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to left, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.75) 40%, transparent 40%);
+ shape-margin: 20px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="gradient"></div>
+ xx xx xx xx
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html
new file mode 100644
index 0000000000..80048a1465
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Shape outside and repeating linear gradient</title>
+ <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-004-ref.html"/>
+ <meta name="assert" content="This test verifies that content wraps correctly around a shape defined by a repeating linear gradient."/>
+ <style type="text/css">
+ .container {
+ position: absolute;
+ top: 70px;
+ width: 200px;
+ font-size: 0px;
+ }
+ .square {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ line-height: 100px;
+ background-color: green;
+ }
+ .gradient {
+ float: left;
+ width: 100px;
+ height: 400px;
+ shape-outside: repeating-linear-gradient(transparent 0px, transparent 100px, white 200px);
+ shape-image-threshold: 0.5;
+ }
+ #failure {
+ position: absolute;
+ top: 70px;
+ width: 200px;
+ font-size: 0px;
+ z-index: -1;
+ }
+ #failure > .square {
+ background-color: red;
+ }
+ #failure > .right {
+ margin-left: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if there are four green squares alternating left and right. There
+ should be no red.
+ </p>
+ <div id="test" class="container">
+ <div class="gradient"></div>
+ <div class="square"></div><br>
+ <div class="square"></div><br>
+ <div class="square"></div><br>
+ <div class="square"></div>
+ </div>
+ <div id="failure">
+ <div class="square"></div><br>
+ <div class="square right"></div><br>
+ <div class="square"></div><br>
+ <div class="square right"></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html
new file mode 100644
index 0000000000..6d0fc21361
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-rl."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html
new file mode 100644
index 0000000000..68243e0ab8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-lr."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html
new file mode 100644
index 0000000000..4ef0b6b5df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-rl."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: sideways-rl;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html
new file mode 100644
index 0000000000..11ae7faa36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-lr."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the bottom. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the top. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html
new file mode 100644
index 0000000000..50c80d0ac7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-rl and text-orientation: sideways."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-rl;
+ text-orientation: sideways;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html
new file mode 100644
index 0000000000..1e245cb285
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-lr and text-orientation: sideways."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-lr;
+ text-orientation: sideways;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html
new file mode 100644
index 0000000000..756b58eaa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-rl."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 25%, transparent 25%);
+ shape-margin: 25%;
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 5%, transparent 5%);
+ shape-margin: 45%
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html
new file mode 100644
index 0000000000..5a78d1c3ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-lr."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 25%, transparent 25%);
+ shape-margin: 25%;
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 5%, transparent 5%);
+ shape-margin: 45%
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html
new file mode 100644
index 0000000000..9ecf76d70b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under sideways-rl."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: sideways-rl;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 25%, transparent 25%);
+ shape-margin: 25%;
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 5%, transparent 5%);
+ shape-margin: 45%
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html
new file mode 100644
index 0000000000..624884e390
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under sideways-lr."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the bottom. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 25%, transparent 25%);
+ shape-margin: 25%;
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the top. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 5%, transparent 5%);
+ shape-margin: 45%
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html
new file mode 100644
index 0000000000..182c5843d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-rl and text-orientation: sideways."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-rl;
+ text-orientation: sideways;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 25%, transparent 25%);
+ shape-margin: 25%;
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 5%, transparent 5%);
+ shape-margin: 45%
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html
new file mode 100644
index 0000000000..c1098f0a22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-lr and text-orientation: sideways."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ writing-mode: vertical-lr;
+ text-orientation: sideways;
+ inline-size: 100px;
+ block-size: 200px;
+ background-color: red;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #float-left {
+ /* Note: In .container's writing-mode, "float: left" actually floats
+ us towards the top. */
+ float: left;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to bottom, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to bottom, green 25%, transparent 25%);
+ shape-margin: 25%;
+ }
+ #float-right {
+ /* Note: In .container's writing-mode, "float: right" actually floats
+ us towards the bottom. */
+ float: right;
+ inline-size: 100px;
+ block-size: 200px;
+ background: linear-gradient(to top, green 50%, transparent 50%);
+ shape-outside: linear-gradient(to top, green 5%, transparent 5%);
+ shape-margin: 45%
+ }
+ </style>
+ </head>
+ <body>
+ <p>
+ The test passes if you see a green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="float-left"></div>
+ x x x x
+ </div>
+ <div id="test" class="container" style="direction: rtl;">
+ <div id="float-right"></div>
+ x x x x
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html
new file mode 100644
index 0000000000..25c465dd3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Left float with radial gradient</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="../../supported-shapes/support/rounded-rectangle.js"></script>
+ <script src="../../supported-shapes/support/subpixel-utils.js"></script>
+ <script src="../../supported-shapes/support/test-utils.js"></script>
+ <meta name="flags" content="ahem dom"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a
+ simple radial gradient."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ .container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 10px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: left;
+ width: 100px;
+ height: 100px;
+ shape-outside: radial-gradient(circle, green 0px, transparent 50px);
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see green boxes following the contour of a circle. There should be no red.
+ </p>
+ <div id="test" class="container">
+ x</br>
+ <div id="gradient"></div>
+ <span id='test0'>x</span><br/>
+ <span id='test1'>x</span><br/>
+ <span id='test2'>x</span><br/>
+ <span id='test3'>x</span><br/>
+ <span id='test4'>x</span><br/>
+ <span id='test5'>x</span><br/>
+ <span id='test6'>x</span><br/>
+ <span id='test7'>x</span><br/>
+ <span id='test8'>x</span><br/>
+ <span id='test9'>x</span><br/>
+ x<br/>
+ </div>
+ <div id="log"></div>
+ <script>
+ test(function() {
+ assert_true(
+ verifyTextPoints({
+ roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 10
+ }, 10, 1.5),
+ "Lines positioned properly around the shape."
+ );
+ });
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html
new file mode 100644
index 0000000000..3a30e67864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Left float with radial gradient and percentage shape margin</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="../../supported-shapes/support/rounded-rectangle.js"></script>
+ <script src="../../supported-shapes/support/subpixel-utils.js"></script>
+ <script src="../../supported-shapes/support/test-utils.js"></script>
+ <meta name="flags" content="ahem dom"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a
+ simple radial gradient when a percentage margin
+ is applied."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ .container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 10px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: left;
+ width: 100px;
+ height: 100px;
+ shape-outside: radial-gradient(circle, green 0px, transparent 40px);
+ shape-margin: 5%;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see green boxes following the contour of a circle. There should be no red.
+ </p>
+ <div id="test" class="container">
+ x</br>
+ <div id="gradient"></div>
+ <span id='test0'>x</span><br/>
+ <span id='test1'>x</span><br/>
+ <span id='test2'>x</span><br/>
+ <span id='test3'>x</span><br/>
+ <span id='test4'>x</span><br/>
+ <span id='test5'>x</span><br/>
+ <span id='test6'>x</span><br/>
+ <span id='test7'>x</span><br/>
+ <span id='test8'>x</span><br/>
+ <span id='test9'>x</span><br/>
+ x<br/>
+ </div>
+ <div id="log"></div>
+ <script>
+ test(function() {
+ assert_true(
+ verifyTextPoints({
+ roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 10
+ }, 10, 1),
+ "Lines positioned properly around the shape."
+ );
+ });
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html
new file mode 100644
index 0000000000..2e52163bf2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Left float with radial gradient shape, shape margin, and shape-image-threshold</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="../../supported-shapes/support/rounded-rectangle.js"></script>
+ <script src="../../supported-shapes/support/subpixel-utils.js"></script>
+ <script src="../../supported-shapes/support/test-utils.js"></script>
+ <meta name="flags" content="ahem dom"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a
+ simple radial gradient when a shape margin
+ and shape-image threshold are applied."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ .container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 10px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: left;
+ width: 100px;
+ height: 100px;
+ shape-outside: radial-gradient(circle, green 10px, rgba(0, 255, 0, 0.75) 25px, rgba(0, 255, 0, 0.25) 25px, transparent 50px);
+ shape-margin: 25px;
+ shape-image-threshold: 0.5;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see green boxes following the contour of a circle. There should be no red.
+ </p>
+ <div id="test" class="container">
+ x</br>
+ <div id="gradient"></div>
+ <span id='test0'>x</span><br/>
+ <span id='test1'>x</span><br/>
+ <span id='test2'>x</span><br/>
+ <span id='test3'>x</span><br/>
+ <span id='test4'>x</span><br/>
+ <span id='test5'>x</span><br/>
+ <span id='test6'>x</span><br/>
+ <span id='test7'>x</span><br/>
+ <span id='test8'>x</span><br/>
+ <span id='test9'>x</span><br/>
+ x<br/>
+ </div>
+ <div id="log"></div>
+ <script>
+ test(function() {
+ assert_true(
+ verifyTextPoints({
+ roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 10
+ }, 10, 1.5),
+ "Lines positioned properly around the shape."
+ );
+ });
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html
new file mode 100644
index 0000000000..5224b23cae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Left float with radial gradient shape, shape margin, and shape-image-threshold</title>
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="../../supported-shapes/support/rounded-rectangle.js"></script>
+ <script src="../../supported-shapes/support/subpixel-utils.js"></script>
+ <script src="../../supported-shapes/support/test-utils.js"></script>
+ <meta name="flags" content="ahem dom"/>
+ <meta name="assert" content="This test verifies that shape-outside respects a
+ simple radial gradient on a right float when
+ shape-image-threshold is applied."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ .container {
+ text-align: right;
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 10px;
+ line-height: 1;
+ }
+ #test {
+ color: green;
+ }
+ #gradient {
+ float: right;
+ width: 100px;
+ height: 100px;
+ shape-outside: radial-gradient(circle, green 10px, rgba(0, 255, 0, 0.75) 50px, rgba(0, 255, 0, 0.25) 50px);
+ shape-image-threshold: 0.5;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see green boxes following the contour of a circle. There should be no red.
+ </p>
+ <div id="test" class="container">
+ x</br>
+ <div id="gradient"></div>
+ <span id='test0'>x</span><br/>
+ <span id='test1'>x</span><br/>
+ <span id='test2'>x</span><br/>
+ <span id='test3'>x</span><br/>
+ <span id='test4'>x</span><br/>
+ <span id='test5'>x</span><br/>
+ <span id='test6'>x</span><br/>
+ <span id='test7'>x</span><br/>
+ <span id='test8'>x</span><br/>
+ <span id='test9'>x</span><br/>
+ x<br/>
+ </div>
+ <div id="log"></div>
+ <script>
+ test(function() {
+ assert_true(
+ verifyTextPoints({
+ roundedRect: {x: 100, y: 10, width: 100, height: 100, rx: 50, ry: 50},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 10
+ }, 10, 1, "right"),
+ "Lines positioned properly around the shape."
+ );
+ });
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html
new file mode 100644
index 0000000000..a5752dc1be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <style type="text/css">
+ .container {
+ width: 100px;
+ height: 100px;
+ }
+ img {
+ float: left;
+ }
+ .green {
+ position: relative;
+ left: 50px;
+ width: 50px;
+ height: 100px;
+ background: rgb(0, 100, 0);
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div class="container">
+ <img src="../support/left-half-rectangle-50.png"/>
+ <div class="green"></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html
new file mode 100644
index 0000000000..70e3286f3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <style type="text/css">
+ .container {
+ width: 150px;
+ height: 100px;
+ background-color: black;
+ }
+ img {
+ float: left;
+ }
+ .green {
+ float: right;
+ width: 50px;
+ height: 100px;
+ background-color: rgb(0, 100, 0);
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red.
+ </p>
+ <div class="container">
+ <img src="../support/left-half-rectangle-70.png"/>
+ <div class="green"></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html
new file mode 100644
index 0000000000..6386fb3d1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <style type="text/css">
+ .container {
+ width: 100px;
+ height: 100px;
+ background: rgb(0, 100, 0);
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div class="container">
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html
new file mode 100644
index 0000000000..9ef7a4a077
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .green, .blue {
+ position: absolute;
+ top: 70px;
+ }
+ .left-rect {
+ left: 10px;
+ }
+ .right-rect {
+ width: 50px;
+ height: 100px;
+ left: 70px;
+ background: rgb(0,100,0);
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div class="green left-rect">
+ <img src="../support/left-half-rectangle.png">
+ </div>
+ <div class="green right-rect"></div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html
new file mode 100644
index 0000000000..80e47e4150
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .green {
+ background-color: rgb(0,100,0);
+ width: 50px;
+ height: 100px;
+ }
+ .left-rect { left: 10px; }
+ .right-rect { left: 70px; }
+
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px }
+
+ .green, .blue {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div class="green left-rect"></div>
+ <div class="green right-rect"></div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html
new file mode 100644
index 0000000000..fbe9caf9ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .left-rect {
+ left: 30px;
+ top: 90px;
+ }
+ .right-rect {
+ left: 140px;
+ top: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: rgb(0,100,0);
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ top: 70px;
+ background-color: blue;
+ }
+ .line-left {
+ left: 135px;
+ }
+ .line-right {
+ left: 195px;
+ }
+ .green, .blue { position: absolute; }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div class="green left-rect">
+ <img src="data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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">
+ </div>
+ <div class="green right-rect"></div>
+ <div class="blue line-left"></div>
+ <div class="blue line-right"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html
new file mode 100644
index 0000000000..3c5cdf9e9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: absolute;
+ top: 70px;
+ left: 8px;
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 20px;
+ line-height: 20px;
+ text-align: right;
+ color: green;
+ }
+ #image { float: right; }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if there's a green square with an image at top right with vertical white and green stripes.
+ There should be no red.
+ </p>
+ <div class="container">
+ <img id="image" src="../support/right-half-rectangle.jpg"/>
+ XXXXX XXXXX XXXXX XXXXX XXXXX
+ XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html
new file mode 100644
index 0000000000..872cbf1e93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <style type="text/css">
+ .container {
+ width: 150px;
+ height: 100px;
+ }
+ img {
+ position: relative;
+ left: -50px;
+ }
+ .green {
+ float: left;
+ width: 50px;
+ height: 100px;
+ background: rgb(0, 100, 0);
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div class="container">
+ <div class="green"></div>
+ <img src="../support/right-half-rectangle.png"/>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html
new file mode 100644
index 0000000000..98c00d3b67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 20px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="../support/left-half-rectangle.jpg"/>
+ X<br>X<br>X<br>X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html
new file mode 100644
index 0000000000..089a3a2a37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ </style>
+</head>
+<body>
+ <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg=="/>
+ X<br>X
+ </div>
+</body>
+</html>
+
+
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html
new file mode 100644
index 0000000000..b199b6e398
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ </style>
+</head>
+<body>
+ <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/>
+ X<br>X
+ </div>
+</body>
+</html>
+
+
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html
new file mode 100644
index 0000000000..826f5275d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ padding-left: 90px;
+ font-family: Ahem;
+ font-size: 40px;
+ color: green;
+ }
+ #image {
+ position: absolute;
+ top: 0px;
+ left: 100px;
+ float: right;
+ margin-bottom: 20px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="../support/right-half-rectangle.png"/>
+ X<br>X<br>X<br><span style="padding-left: 70px">X</span>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html
new file mode 100644
index 0000000000..999773bd0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ padding-left: 90px;
+ font-family: Ahem;
+ font-size: 40px;
+ color: green;
+ }
+ #image {
+ position: absolute;
+ top: 0px;
+ left: 100px;
+ float: right;
+ margin-bottom: 20px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="../support/right-half-rectangle.gif"/>
+ X<br>X<br>X<br><span style="padding-left: 70px">X</span>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html
new file mode 100644
index 0000000000..b199b6e398
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ </style>
+</head>
+<body>
+ <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/>
+ X<br>X
+ </div>
+</body>
+</html>
+
+
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html
new file mode 100644
index 0000000000..f326e851b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .green {
+ background-color: rgb(0,100,0);
+ width: 100px;
+ height: 200px;
+ }
+ .left-rect { left: 10px; }
+ .right-rect { left: 120px; }
+
+ .blue {
+ width: 2px;
+ height: 200px;
+ background-color: blue;
+ }
+ .left-line { left: 115px; }
+ .right-line { left: 230px }
+
+ .green, .blue {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div class="green left-rect"></div>
+ <div class="green right-rect"></div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html
new file mode 100644
index 0000000000..0060369e95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .green {
+ top: 70px;
+ left: 10px;
+ width: 100px;
+ height: 100px;
+ background-color: rgb(0,100,0);
+ }
+ .blue {
+ top: 50px;
+ left: 60px;
+ width: 2px;
+ height: 140px;
+ background-color: blue;
+ }
+ .green, .blue { position: absolute; }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if there are two identical green rectangles on either side of the blue line.
+ There should be no red.
+ </p>
+ <div class="green"></div>
+ <div class="blue"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html
new file mode 100644
index 0000000000..0671a06e4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a left float</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-000-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a png image in a data: url is properly respected on a left float."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: left;
+ shape-outside: url("data:image/png;base64,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");
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="data:image/png;base64,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"/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html
new file mode 100644
index 0000000000..d66925da6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a left float</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-001-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a png image with 70% alpha is treated as if the image had no alpha."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 150px;
+ color: rgb(0, 100, 0);
+ background-color: black;
+ }
+ #image {
+ float: left;
+ width: 100px;
+ height: 100px;
+ shape-outside: url("support/left-half-rectangle-70.png");
+ }
+ #failure {
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ z-index: -1;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="failure"></div>
+ <div id="image">
+ <img src="support/left-half-rectangle-70.png"/>
+ </div>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html
new file mode 100644
index 0000000000..b7e4578afa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a left float</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-002-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a svg image in a data uri is properly interpreted as a shape."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: left;
+ shape-outside: url('data:image/svg+xml;utf8,<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>');
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src='data:image/svg+xml;utf8,<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html
new file mode 100644
index 0000000000..5994a79282
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a left float</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-002-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a svg image with 20% alpha and 0.3 shape-image-threshold creates a proper shape."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: left;
+ shape-outside: url("support/left-half-rectangle-20.svg");
+ shape-image-threshold: 0.3;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/left-half-rectangle-20.svg"/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html
new file mode 100644
index 0000000000..117f3a8e2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a left float</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-000-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a png image with 50% alpha and 0.6 shape-image-threshold creates a proper shape."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: left;
+ shape-outside: url("support/left-half-rectangle-50.png");
+ shape-image-threshold: 0.6;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/left-half-rectangle-50.png"/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html
new file mode 100644
index 0000000000..d15cbf4157
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a left float</title>
+ <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-002-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a svg image in a data uri with 70% alpha and 0.8 shape-image-threshold creates a proper shape."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: left;
+ shape-outside: url('data:image/svg+xml;utf8,<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>');
+ shape-image-threshold: 0.8;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src='data:image/svg+xml;utf8,<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html
new file mode 100644
index 0000000000..1a9fe77176
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(png), real image + shape-margin (px)</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-image-006-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around all the image pixels
+ + the shape-margin when shape-outside is given a png file."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .container {
+ left: 10px;
+ font: 50px/1 Ahem;
+ }
+ #test {
+ width: 200px;
+ color: rgb(0,100,0);
+ }
+ #image {
+ float: left;
+ shape-outside: url("support/left-half-rectangle.png");
+ shape-margin: 10px;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px; }
+
+ .failure {
+ left: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: -1;
+ }
+ .container, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/left-half-rectangle.png"/>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html
new file mode 100644
index 0000000000..351aa02416
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(svg), real image + shape-margin (px)</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-image-007-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around all the image pixels
+ + the shape-margin when shape-outside is given an svg file."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .container {
+ left: 10px;
+ font: 50px/1 Ahem;
+ }
+ #test {
+ width: 200px;
+ color: rgb(0,100,0);
+ }
+ #image {
+ float: left;
+ shape-outside: url("support/left-half-rectangle.svg");
+ shape-margin: 10px;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px; }
+
+ .failure {
+ left: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: -1;
+ }
+ .container, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/left-half-rectangle.svg"/>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html
new file mode 100644
index 0000000000..64ea7ef342
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(jpg), data uri + shape-margin (%)</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-image-008-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around all the image pixels
+ + the shape-margin as a percentage when shape-outside is given an jpg data uri."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .container {
+ left: 10px;
+ font: 50px/1 Ahem;
+ }
+ #test {
+ width: 200px;
+ height: 200px;
+ color: rgb(0,100,0);
+ }
+ #image {
+ float: left;
+ margin: 20px;
+ shape-outside: url(data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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);
+ shape-margin: 5%;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ }
+ .line-left {
+ left: 135px;
+ }
+ .line-right {
+ left: 195px;
+ }
+ .failure {
+ left: 140px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: -1;
+ }
+ .container, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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" />
+ X<br/>X
+ </div>
+ <div class="blue line-left"></div>
+ <div class="blue line-right"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html
new file mode 100644
index 0000000000..c7978bbabc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
+ <link rel="match" href="reference/shape-image-006-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around the image pixels extracted from
+ a shape-outside png file with shape-image-threshold set + the shape-margin in
+ absolute length."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ #test, #image, #white, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ #test, #image { left: 10px; }
+ #image { z-index: -2; }
+
+ #white {
+ left: 60px;
+ width: 10px;
+ height: 100px;
+ background-color: white;
+ z-index: -1;
+ }
+ #test {
+ font: 50px/1 Ahem;
+ width: 200px;
+ color: rgb(0,100,0);
+ z-index: 2;
+ }
+ #shape-image {
+ float: left;
+ width: 100px;
+ height: 100px;
+ shape-outside: url("support/left-half-rectangle-70.png");
+ shape-margin: 10px;
+ shape-image-threshold: 0.75;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ z-index: 3;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px; }
+
+ .failure {
+ left: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: 1;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <img id="image" src="support/left-half-rectangle-70.png"/>
+ <div id="white"></div>
+ <div id="test">
+ <div id="shape-image"></div>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html
new file mode 100644
index 0000000000..07acd2a420
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(png), data uri + shape-image-threshold + shape-margin (%)</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
+ <link rel="match" href="reference/shape-image-006-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around the image pixels extracted from
+ a shape-outside png file with shape-image-threshold set + the shape-margin as
+ a percentage."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ #test, #image, #white, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ #test, #image { left: 10px; }
+ #image { z-index: -2; }
+
+ #white {
+ left: 60px;
+ width: 10px;
+ height: 100px;
+ background-color: white;
+ z-index: -1;
+ }
+ #test {
+ font: 50px/1 Ahem;
+ width: 200px;
+ color: rgb(0,100,0);
+ z-index: 2;
+ }
+ #shape-image {
+ float: left;
+ width: 100px;
+ height: 100px;
+ shape-outside: url(data:image/png;base64,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);
+ shape-margin: 5%;
+ shape-image-threshold: 0.7;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ z-index: 3;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px; }
+
+ .failure {
+ left: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: 1;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <img id="image" src="data:image/png;base64,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"/>
+ <div id="white"></div>
+ <div id="test">
+ <div id="shape-image"></div>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html
new file mode 100644
index 0000000000..a1286f07bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(svg), real image + shape-image-threshold + shape-margin (px)</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
+ <link rel="match" href="reference/shape-image-007-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around the image pixels extracted from
+ a shape-outside svg file with shape-image-threshold set + the shape-margin in
+ absolute length."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ #test, #image, #white, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ #test, #image { left: 10px; }
+ #image { z-index: -2; }
+
+ #white {
+ left: 60px;
+ width: 10px;
+ height: 100px;
+ background-color: white;
+ z-index: -1;
+ }
+ #test {
+ font: 50px/1 Ahem;
+ width: 200px;
+ color: rgb(0,100,0);
+ z-index: 2;
+ }
+ #shape-image {
+ float: left;
+ width: 100px;
+ height: 100px;
+ shape-outside: url("support/left-half-rectangle-50.svg");
+ shape-margin: 10px;
+ shape-image-threshold: 0.55;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ z-index: 3;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px; }
+
+ .failure {
+ left: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: 1;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <img id="image" src="support/left-half-rectangle-50.svg"/>
+ <div id="white"></div>
+ <div id="test">
+ <div id="shape-image"></div>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html
new file mode 100644
index 0000000000..5ec28f5a7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Wrapping content around right floating actual jpg image</title>
+ <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-012-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around all the image pixels when shape-outside is given a jpg."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: absolute;
+ top: 70px;
+ left: 8px;
+ font-family: Ahem;
+ font-size: 20px;
+ color: green;
+ line-height: 20px;
+ }
+ #test {
+ width: 200px;
+ height: 200px;
+ text-align: right;
+ background-color: red;
+ }
+ #image {
+ float: right;
+ margin-left: 10px;
+ shape-outside: url("support/right-half-rectangle.jpg");
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if there's a green square with an image at top right with vertical white and green stripes.
+ There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/right-half-rectangle.jpg"/>
+ XXXXX XXXXX XXXXX XXXXX XXXXX
+ XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html
new file mode 100644
index 0000000000..c487d63138
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Wrapping content around shape given by a right floating png</title>
+ <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-013-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around the shape defined by the data uri png."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #test {
+ width: 100px;
+ height: 100px;
+ text-align: right;
+ }
+ #image {
+ float: right;
+ margin-left: 10px;
+ shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAK5JREFUeNrs0QERADAMArEyr/Uvgfno5R1A0nYulM2JIW8ERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIgLgAgIEAEBIiBABASIgAgIEAEBIiDH+wAAAP//AwD5cQUr8xYXFAAAAABJRU5ErkJggg==");
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/right-half-rectangle.png"/>
+ X X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html
new file mode 100644
index 0000000000..1a8bf75f16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Wrapping content around shape given by a right floating svg file</title>
+ <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-002-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around the shape defined by an svg file."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #test {
+ width: 100px;
+ height: 100px;
+ text-align: right;
+ }
+ #image {
+ float: right;
+ margin-left: 10px;
+ shape-outside: url("support/right-half-rectangle.svg");
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/right-half-rectangle.svg"/>
+ X
+ X
+ </div>
+ <div id="overlay"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html
new file mode 100644
index 0000000000..3d2c1ec6a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a right float</title>
+ <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-013-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a png image with 20% alpha and 0.2 shape-image-threshold creates a proper shape."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: right;
+ shape-outside: url(support/right-half-rectangle-20.png);
+ shape-image-threshold: 0.2;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/right-half-rectangle-20.png"/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html
new file mode 100644
index 0000000000..d0eed8d173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a right float</title>
+ <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-013-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a png image with 70% alpha and 0.71 shape-image-threshold creates a proper shape."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: right;
+ shape-outside: url(support/right-half-rectangle-70.png);
+ shape-image-threshold: 0.71;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/right-half-rectangle-70.png"/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html
new file mode 100644
index 0000000000..d5afb242db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: Image shape on a right float</title>
+ <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-002-ref.html"/>
+ <meta name="flags" content="ahem image"/>
+ <meta name="assert" content="This test verifies that a shape specified as a data uri svg with 70% alpha creates a proper shape, shape-image-threshold is defined to 0.71."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ .container {
+ position: relative;
+ font-family: Ahem;
+ font-size: 50px;
+ line-height: 50px;
+ }
+ #test {
+ width: 100px;
+ color: rgb(0, 100, 0);
+ background-color: red;
+ }
+ #image {
+ float: right;
+ shape-outside: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsMCwwLDAuNykiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGw9IiMwMDY0MDAiIGQ9Ik01MCwwaDUwYzAsMzMuMywwLDY2LjcsMCwxMDBINTBWMHoiLz4NCjwvc3ZnPg0K");
+ shape-image-threshold: 0.71;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if you see a solid green square. There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/right-half-rectangle-70.svg"/>
+ X
+ X
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html
new file mode 100644
index 0000000000..d94a2a9d92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: right float, url(jpg), real image + shape-margin (%)</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-018-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a JPEG image file is the same as the image's dimensions + shape-margin."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 100px;
+ shape-outside: url("support/left-half-rectangle.jpg"); /* size: 100x100, no alpha channel */
+ shape-margin: 10%; /* overall shape is 120x120 rectangle with corner radii = 10px */
+ }
+ #failure {
+ position: absolute;
+ top: 0px;
+ left: 40px; /* container.width - shape-outside+margin.width - font-size */
+ width: 200px;
+ text-align: left;
+ color: red;
+ z-index: -1;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="support/left-half-rectangle.jpg"/>
+ X<br>X<br>X<br>X
+ <div id="failure">
+ X<br>X<br>X<br><span style="margin-left: 120px">X
+ </div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html
new file mode 100644
index 0000000000..14c3fb2a5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: right float, url(png), data uri + shape-margin (px)</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-019-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies the boundary of a shape-outside defined by a PNG data URI and a shape-margin."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 100px;
+ margin-top: 10px;
+ margin-bottom: 100px;
+ /* 20x20 solid blue PNG */
+ shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg==");
+ shape-margin: 10px;
+ }
+ #failure {
+ position: absolute;
+ top: 0px;
+ left: 130px; /* container.width - shape-outside+margin.width - font-size */
+ width: 200px;
+ text-align: left;
+ color: red;
+ z-index: -1;
+ }
+ </style>
+</head>
+<body>
+ <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg=="/>
+ X<br>X
+ <div id="failure">
+ X<br><span style="margin-left: 30px">X</span>
+ </div>
+ </div>
+</body>
+</html>
+
+
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html
new file mode 100644
index 0000000000..aa3c5cc3aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: right float, url(svg), data uri + shape-margin (%)</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-020-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies the boundary of a shape-outside defined by an SVG URI and a shape-margin."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 100px;
+ margin-top: 10px;
+ margin-bottom: 100px;
+ shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>");
+ shape-margin: 5%;
+ }
+ #failure {
+ position: absolute;
+ top: 0px;
+ left: 130px; /* container.width - shape-outside+margin.width - font-size */
+ width: 200px;
+ text-align: left;
+ color: red;
+ z-index: -1;
+ }
+ </style>
+</head>
+<body>
+ <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/>
+ X<br>X
+ <div id="failure">
+ X<br><span style="margin-left: 30px">X</span>
+ </div>
+ </div>
+</body>
+</html>
+
+
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html
new file mode 100644
index 0000000000..8671fa1c61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: right float, url(png), real image + shape-image-threshold + shape-margin (%)</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-021-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a PNG image file and shape-margin is correct."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 100px;
+ shape-outside: url("support/right-half-rectangle.png"); /* size: 100x100, only the right 50x100 half is opaque */
+ shape-margin: 10%; /* overall shape is 120x90 rectangle with corner radii = 20px */
+ shape-image-threshold: 0.5;
+ }
+ #failure {
+ position: absolute;
+ top: 0px;
+ left: 90px; /* container.width - shape-outside+margin.width - font-size */
+ width: 200px;
+ text-align: left;
+ color: red;
+ z-index: -1;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="support/right-half-rectangle.png"/>
+ X<br>X<br>X<br>X
+ <div id="failure">
+ X<br>X<br>X<br><span style="margin-left: 70px">X</span>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html
new file mode 100644
index 0000000000..8e567b1708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: right float, url(gif), real image + shape-image-threshold + shape-margin (px)</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-022-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a GIF image file and shape-margin is correct."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 100px;
+ shape-outside: url("support/right-half-rectangle.gif"); /* size: 100x100, only the right 50x100 half is opaque */
+ shape-margin: 20px; /* overall shape is 120x90 rectangle with corner radii = 20px */
+ shape-image-threshold: 0.2;
+ }
+ #failure {
+ position: absolute;
+ top: 0px;
+ left: 90px; /* container.width - shape-outside+margin.width - font-size */
+ width: 200px;
+ text-align: left;
+ color: red;
+ z-index: -1;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="support/right-half-rectangle.gif"/>
+ X<br>X<br>X<br>X
+ <div id="failure">
+ X<br>X<br>X<br><span style="margin-left: 70px">X</span>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html
new file mode 100644
index 0000000000..73e6322c8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: right float, url(svg), data uri + shape-image-threshold + shape-margin (%)</title>
+ <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-023-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies the boundary of a shape-outside defined by an SVG URI, shape-image-threshold, and a shape-margin."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ #container {
+ position: relative;
+ width: 200px;
+ font-family: Ahem;
+ font-size: 40px;
+ text-align: right;
+ color: green;
+ }
+ #image {
+ float: right;
+ margin-left: 100px;
+ margin-top: 10px;
+ margin-bottom: 100px;
+ shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgba(0,0,255, 0.5)'/></svg>");
+ shape-image-threshold: 0.4;
+ shape-margin: 5%;
+ }
+ #failure {
+ position: absolute;
+ top: 0px;
+ left: 130px; /* container.width - shape-outside+margin.width - font-size */
+ width: 200px;
+ text-align: left;
+ color: red;
+ z-index: -1;
+ }
+ </style>
+</head>
+<body>
+ <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
+ <div id="container">
+ <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgb(0,0,255)'/></svg>"/>
+ X<br>X
+ <div id="failure">
+ X<br><span style="margin-left: 30px">X</span>
+ </div>
+ </div>
+</body>
+</html>
+
+
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html
new file mode 100644
index 0000000000..3ca0ba912b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: shape-outside from img element with different size than the image file</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-024-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around all the image pixels
+ calculated from the size of the img element, which is different
+ than the size of the image itself."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .container {
+ left: 10px;
+ font: 100px/1 Ahem;
+ }
+ #test {
+ width: 211px;
+ color: rgb(0,100,0);
+ }
+ #image {
+ float: left;
+ width: 200px;
+ height: 200px;
+ shape-outside: url("support/left-half-rectangle.png");
+ shape-margin: 10px;
+ }
+ .blue {
+ width: 2px;
+ height: 200px;
+ background-color: blue;
+ }
+ .left-line { left: 115px; }
+ .right-line { left: 230px; }
+
+ .failure {
+ left: 120px;
+ width: 100px;
+ height: 200px;
+ background-color: red;
+ z-index: -1;
+ }
+ .container, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/left-half-rectangle.png"/>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html
new file mode 100644
index 0000000000..f202ffb2e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: shape-outside from first frame of animated gif</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="match" href="reference/shape-image-025-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that shape-outside is extracted from the
+ first frame of an animated gif."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body { margin: 0; }
+ .container {
+ left: 10px;
+ width: 200px;
+ font: 50px/1 Ahem;
+ color: rgb(0,100,0);
+ }
+ #image {
+ float: left;
+ shape-outside: url("support/animated.gif");
+ }
+ .blue-line {
+ top: 50px;
+ left: 60px;
+ width: 2px;
+ height: 140px;
+ background-color: blue;
+ }
+ .square {
+ width: 50px;
+ height: 50px;
+ }
+ .green {
+ left: 10px;
+ background-color: rgb(0,100,0);
+ }
+ .failure {
+ left: 60px;
+ background-color: red;
+ z-index: -1;
+ }
+ .container, .blue-line, .square, .failure { position: absolute; }
+ .container, .square, .failure { top: 70px; }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if there are two identical green rectangles on either side of the blue line.
+ There should be no red.
+ </p>
+ <div class="container">
+ <img id="image" src="support/animated.gif"/>
+ X<br/>X
+ </div>
+ <div class="green square"></div>
+ <div class="blue-line"></div>
+ <div class="failure square"></div>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html
new file mode 100644
index 0000000000..74f5f34411
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(png), real offset image + shape-margin (px)</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-image-006-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around all the image pixels
+ + the shape-margin when shape-outside is given a png file.
+ Additionally, the shape-outside: image element is offset from its
+ containing block."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .container {
+ font: 50px/1 Ahem;
+ padding: 50px;
+ position: absolute;
+ top: 20px;
+ left: -40px;
+ }
+ #test {
+ width: 200px;
+ color: rgb(0,100,0);
+ }
+ #image {
+ float: left;
+ shape-outside: url("support/left-half-rectangle.png");
+ shape-margin: 10px;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px; }
+
+ .failure {
+ left: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: -1;
+ }
+ .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div id="test" class="container">
+ <img id="image" src="support/left-half-rectangle.png"/>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html
new file mode 100644
index 0000000000..112d7b9763
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Test: left float, url(png), real negative offset image + shape-margin (px)</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
+ <link rel="match" href="reference/shape-image-006-ref.html"/>
+ <meta name="flags" content="ahem"/>
+ <meta name="assert" content="This test verifies that content wraps around all the image pixels
+ + the shape-margin when shape-outside is given a png file.
+ Additionally, the shape-outside: image element is given a negative
+ left offset relative to its containing block."/>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ .container {
+ left: 10px;
+ font: 50px/1 Ahem;
+ }
+ #test {
+ width: 200px;
+ color: rgb(0,100,0);
+ }
+ #image {
+ float: left;
+ shape-outside: url("support/left-half-rectangle.png");
+ shape-margin: 20px;
+ margin-left: -10px;
+ width: 100px;
+ height: 100px;
+ }
+ .blue {
+ width: 2px;
+ height: 100px;
+ background-color: blue;
+ }
+ .left-line { left: 65px; }
+ .right-line { left: 125px; }
+
+ .failure {
+ left: 70px;
+ width: 50px;
+ height: 100px;
+ background-color: red;
+ z-index: -1;
+ }
+ .container, .blue, .failure {
+ position: absolute;
+ top: 70px;
+ }
+ </style>
+</head>
+<body>
+ <p>
+ The test passes if the green rectangle on the right is completely between the two blue lines.
+ There should be no red.
+ </p>
+ <div id="test" class="container">
+ <div id="image"><img src="support/left-half-rectangle.png" style="margin-left: 10px"/></div>
+ X<br/>X
+ </div>
+ <div class="blue left-line"></div>
+ <div class="blue right-line"></div>
+ <div class="failure"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html
new file mode 100644
index 0000000000..f9dc89d0e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>'shape-outside' layout is updated after the image has been loaded</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-image">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ #shape {
+ float: left;
+ width: 200px;
+ height: 200px;
+ shape-outside: url("support/left-half-rectangle.png?pipe=trickle(d1)");
+ }
+</style>
+<p>
+ Verify that an image valued shape-outside layout is updated after the image has
+ been loaded. This test checks that the left edge of the "Hello World" text span
+ is defined by the 200px wide float before shape-outside image has been loaded and
+ by the 100px wide image segment after it has been loaded.
+</p>
+<div id="container">
+ <img src="support/left-half-rectangle.png" id="shape"><span id="text">Hello World</span>
+</div>
+<script>
+ function elementRect(elementId) {
+ var s = document.getElementById("container").getBoundingClientRect();
+ var r = document.getElementById(elementId).getBoundingClientRect();
+ return {left: r.left - s.left, top: r.top - s.top,
+ width: r.width, height: r.height};
+ }
+
+ async_test(t => {
+ assert_equals(elementRect("text").left, 200, 'image not loaded');
+
+ window.onload = t.step_func_done(() => {
+ document.body.offsetTop; // Force a layout.
+
+ assert_equals(elementRect("text").left, 100, 'image loaded');
+ });
+ });
+</script>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif
new file mode 100644
index 0000000000..9e424df7cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png
new file mode 100644
index 0000000000..4d5dd8928a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg
new file mode 100644
index 0000000000..f221a3d39b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg
@@ -0,0 +1,3 @@
+<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.2)" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
+</svg>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png
new file mode 100644
index 0000000000..c64fd71dc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg
new file mode 100644
index 0000000000..d0109053eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg
@@ -0,0 +1,3 @@
+<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.5)" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
+</svg>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png
new file mode 100644
index 0000000000..39f44b5d36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg
new file mode 100644
index 0000000000..7286ce06ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg
@@ -0,0 +1,3 @@
+<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
+</svg>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg
new file mode 100644
index 0000000000..1291251d0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png
new file mode 100644
index 0000000000..74a8eb47c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg
new file mode 100644
index 0000000000..cbd135b5e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg
@@ -0,0 +1,3 @@
+<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
+</svg>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png
new file mode 100644
index 0000000000..1ca67bd0b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png
new file mode 100644
index 0000000000..68bf7d03f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png
new file mode 100644
index 0000000000..0df4e24d4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg
new file mode 100644
index 0000000000..2e2db1a878
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg
@@ -0,0 +1,3 @@
+<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif
new file mode 100644
index 0000000000..8c3a4147cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg
new file mode 100644
index 0000000000..a074d70186
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png
new file mode 100644
index 0000000000..ff944b7bdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png
Binary files differ
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg
new file mode 100644
index 0000000000..bb06f34d5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg
@@ -0,0 +1,3 @@
+<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
+<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
+</svg> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html
new file mode 100644
index 0000000000..f4f21058a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-023-ref.html
new file mode 100644
index 0000000000..835f29265f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-023-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html
new file mode 100644
index 0000000000..dabff6348b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ position: relative;
+ font: 15px Ahem, sans-serif;
+ line-height: 20px;
+ width: 200px;
+ height: 200px;
+ color: green;
+ }
+ .circle {
+ z-index: -1;
+ width: 160px;
+ height: 160px;
+ border-radius: 80px;
+ background-color: blue;
+ overflow: hidden;
+ }
+ #left-circle-outline {
+ position: absolute;
+ top: 20px;
+ left: 0px;
+ }
+ .left-circle-float-line {
+ float: left;
+ clear: left;
+ height: 20px;
+ }
+ </style>
+ <body>
+ <p>The test passes if all of the squares are green. There should be no red.</p>
+ <div class="container">
+ X<br/>
+ <div id="left-circle-outline"></div>
+ <!-- generated left-rounded-rect-float-line divs will be inserted here -->
+ X<br/>
+ X<br/>
+ X<br/>
+ X<br/>
+ X<br/>
+ X<br/>
+ X<br/>
+ X<br/>
+ X
+ </div>
+
+ <script src="../../support/rounded-rectangle.js"></script>
+ <script src="../../support/subpixel-utils.js"></script>
+ <script>
+ genLeftRoundedRectFloatShapeOutsideRefTest({
+ roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 20,
+ floatElementClassSuffix: "circle-float-line",
+ insertElementIdSuffix: "circle-outline"
+ });
+ </script>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-032-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-032-ref.html
new file mode 100644
index 0000000000..e6b0fe1db8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-032-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(50% at left top) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle(50% at left top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px; top: 0px; left: 60px;"></div>
+ <div class="box" style="height: 12px; top: 36px; left: 48px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 48px; left: 36px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 120px; left: 60px;"></div>
+ <div class="box" style="height: 12px; top: 156px; left: 48px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 168px; left: 36px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-033-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-033-ref.html
new file mode 100644
index 0000000000..3814e2eebd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-033-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(50% at right bottom) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle(50% at right bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
+ <div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 180px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 216px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 228px; left: 120px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-034-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-034-ref.html
new file mode 100644
index 0000000000..5cf26ced59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-034-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle(50% at right top) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle(50% at right top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px; top: 0px; right: 60px;"></div>
+ <div class="box" style="height: 12px; top: 36px; right: 48px;"></div>
+ <div class="box" style="height: 12px; top: 48px; right: 36px;"></div>
+ <div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 120px; right: 60px;"></div>
+ <div class="box" style="height: 12px; top: 156px; right: 48px;"></div>
+ <div class="box" style="height: 12px; top: 168px; right: 36px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-035-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-035-ref.html
new file mode 100644
index 0000000000..7fcd50eff0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-035-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(50% at left bottom) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle(50% at left bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
+ <div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 180px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 216px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 228px; right: 120px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-036-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-036-ref.html
new file mode 100644
index 0000000000..a731f206a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-036-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle() reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-041-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-041-ref.html
new file mode 100644
index 0000000000..fbf2516bbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-041-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(100%) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle(100%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 12px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-042-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-042-ref.html
new file mode 100644
index 0000000000..c7a49302ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-042-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle() reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-047-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-047-ref.html
new file mode 100644
index 0000000000..a518cfd361
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-047-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle(100%) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle(100%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px; top: 0px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 12px; right: 120px;"></div>
+ <div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-048-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-048-ref.html
new file mode 100644
index 0000000000..12ed0a1f52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-048-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle(50% at left 40px top 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ margin-block-end: 28px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-049-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-049-ref.html
new file mode 100644
index 0000000000..8da6325564
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-049-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle(50% at left 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ margin-block-end: 28px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-050-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-050-ref.html
new file mode 100644
index 0000000000..0991b5961f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-050-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle(50% at right 40px top 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-051-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-051-ref.html
new file mode 100644
index 0000000000..5178b55964
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-051-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle(50% at right 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-052-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-052-ref.html
new file mode 100644
index 0000000000..12376fbc7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-052-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle(50% at right 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-053-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-053-ref.html
new file mode 100644
index 0000000000..281bd8834e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-053-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle(50% at right 40px top 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-054-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-054-ref.html
new file mode 100644
index 0000000000..4f1cdae15f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-054-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: circle(50% at left 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-055-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-055-ref.html
new file mode 100644
index 0000000000..97fc1e9fc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-055-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: circle(50% at right 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-start: 20px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-056-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-056-ref.html
new file mode 100644
index 0000000000..519d33864d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-056-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html
new file mode 100644
index 0000000000..e15f053de9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle + margin-box + position (px)</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle from the margin box and positioned
+ in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: margin-box circle(80px at 90px 90px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-014.html
new file mode 100644
index 0000000000..e4e3372e31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-014.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle + content-box + radius and position in % units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle from the content box with the radius
+ and position in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: content-box circle(50% at 50% 50%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-015.html
new file mode 100644
index 0000000000..b6d93677c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-015.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle + closest-side + padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#closest-side">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle with the radius explicitly set as
+ closest-side from the padding box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: padding-box circle(closest-side at 75px 80px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-016.html
new file mode 100644
index 0000000000..28dfca6699
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-016.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle + farthest-side + border-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#farthest-side">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle with the radius defined as farthest-side
+ from the border box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 120px;
+ height: 120px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: border-box circle(farthest-side);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-017.html
new file mode 100644
index 0000000000..48b0d18015
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-017.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle + shape-margin in px</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle with a shape-margin in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 14px;
+ shape-outside: circle(56px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-018.html
new file mode 100644
index 0000000000..cfbab52e8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-018.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle + shape-margin in % units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle with a shape-margin in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10%;
+ shape-outside: circle(40px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-019.html
new file mode 100644
index 0000000000..024273b701
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-019.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle at top left + margin-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle from the margin box and is positioned
+ top left with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 120px;
+ height: 120px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: margin-box circle(99% at top left);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-020.html
new file mode 100644
index 0000000000..060501fdf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-020.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle at % + border-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle from the padding box with a position specified
+ as a percentage and with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ padding: 10px;
+ border: 20px solid transparent;
+ shape-margin: 10px;
+ shape-outside: border-box circle(86px at 40%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-021.html
new file mode 100644
index 0000000000..fa6a5f8a7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-021.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle + farthest-side + padding-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#farthest-side">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle with a farthest-side radius from the
+ padding box with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 110px;
+ height: 110px;
+ margin: 10px;
+ padding: 15px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: padding-box circle(farthest-side at -10px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-022.html
new file mode 100644
index 0000000000..fb0e14bf9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-022.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle at bottom right + content-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-circle-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle from the padding box positioned at
+ center right with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 100px;
+ height: 100px;
+ margin: 20px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: content-box circle(20px at center right);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html
new file mode 100644
index 0000000000..97763adf01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, circle radius in % units + shape-margin + border-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="match" href="reference/shape-outside-circle-023-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a circle from the border box with radius in
+ percentage units and with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ padding: 10px;
+ border: 20px solid transparent;
+ shape-margin: 6px;
+ shape-outside: border-box circle(40%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-025.html
new file mode 100644
index 0000000000..233ea98210
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-025.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, circle + shape-margin + padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-circle-023-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a circle from the padding box with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ padding: 20px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: padding-box circle(60px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-026.html
new file mode 100644
index 0000000000..600150b251
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-026.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, circle + shape-margin + content-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-circle-023-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a circle from the content box with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 120px;
+ height: 120px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: content-box circle(60px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html
new file mode 100644
index 0000000000..ecfb9b7f34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, circle with radius in % units + shape-margin + margin-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-circle-023-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a circle positioned from the margin box with a
+ shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 110px;
+ height: 110px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 15px;
+ shape-outside: margin-box circle(60px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-028.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-028.html
new file mode 100644
index 0000000000..673d084c8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-028.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, circle(closest-side) at position % + shape-margin + border-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#closest-side">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="match" href="reference/shape-outside-circle-023-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a circle positioned from the border box with a
+ shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 110px;
+ height: 110px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 30px;
+ shape-outside: border-box circle(closest-side at 60%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-029.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-029.html
new file mode 100644
index 0000000000..229ee76a12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-029.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, circle at center right + shape-margin + padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-circle-023-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a circle positioned center right from the padding
+ box with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 110px;
+ height: 110px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 20px;
+ shape-outside: padding-box circle(120px at center right);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-030.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-030.html
new file mode 100644
index 0000000000..e9085aefac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-030.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle radius in px units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-circle-030-ref.html">
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an circle with the radius in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ font: 15px Ahem, sans-serif;
+ line-height: 20px;
+ width: 400px;
+ height: 200px;
+ color: green;
+ }
+ .circle {
+ width: 160px;
+ height: 160px;
+ shape-outside: circle(80px at 80px 80px);
+ }
+ </style>
+ <body>
+ <p>The test passes if all of the squares are green. There should be no red.</p>
+ <div class="container">
+ X<br/>
+ <div style="float: left" class="circle"></div>
+ <span id="test0">X</span><br/>
+ <span id="test1">X</span><br/>
+ <span id="test2">X</span><br/>
+ <span id="test3">X</span><br/>
+ <span id="test4">X</span><br/>
+ <span id="test5">X</span><br/>
+ <span id="test6">X</span><br/>
+ <span id="test7">X</span><br/>
+ <span id="test8">X
+ </div>
+ <script src="../support/rounded-rectangle.js"></script>
+ <script src="../support/subpixel-utils.js"></script>
+ <script src="../support/test-utils.js"></script>
+ <script>
+ verifyTextPoints({
+ roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 20
+ }, 9);
+ </script>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-031.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-031.html
new file mode 100644
index 0000000000..340fef6400
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-031.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, circle radius in % units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-circle-030-ref.html">
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an circle with the radius in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ font: 15px Ahem, sans-serif;
+ line-height: 20px;
+ width: 400px;
+ height: 200px;
+ color: green;
+ }
+ .circle {
+ width: 160px;
+ height: 160px;
+ shape-outside: circle(50% at 50% 50%);
+ }
+ </style>
+ <body>
+ <p>The test passes if all of the squares are green. There should be no red.</p>
+ <div class="container">
+ X<br/>
+ <div style="float: left" class="circle"></div>
+ <span id="test0">X</span><br/>
+ <span id="test1">X</span><br/>
+ <span id="test2">X</span><br/>
+ <span id="test3">X</span><br/>
+ <span id="test4">X</span><br/>
+ <span id="test5">X</span><br/>
+ <span id="test6">X</span><br/>
+ <span id="test7">X</span><br/>
+ <span id="test8">X
+ </div>
+ <script src="../support/rounded-rectangle.js"></script>
+ <script src="../support/subpixel-utils.js"></script>
+ <script src="../support/test-utils.js"></script>
+ <script>
+ verifyTextPoints({
+ roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 20
+ }, 9);
+ </script>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.html
new file mode 100644
index 0000000000..d57bb5de4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(50% at left top)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-032-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at left top) value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(50% at left top);
+ clip-path: circle(50% at left top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-033.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-033.html
new file mode 100644
index 0000000000..5e02e1674f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-033.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(50% at right bottom)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-033-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at right bottom) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(50% at right bottom);
+ clip-path: circle(50% at right bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-034.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-034.html
new file mode 100644
index 0000000000..60fac07dd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-034.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle(50% at right top)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-034-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at right top) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(50% at right top);
+ clip-path: circle(50% at right top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-035.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-035.html
new file mode 100644
index 0000000000..ed9229416b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-035.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle(50% at left bottom)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-035-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at left bottom) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(50% at left bottom);
+ clip-path: circle(50% at left bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-036.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-036.html
new file mode 100644
index 0000000000..75b8b85a86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-036.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle()</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-036-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle() value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle();
+ clip-path: circle();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.html
new file mode 100644
index 0000000000..b868cacbe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(closest-side at center) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-036-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(closest-side at center) border-box value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(closest-side at center) border-box;
+ clip-path: circle(closest-side at center) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-right: 10px; /* Not affect layout of the boxes */
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.html
new file mode 100644
index 0000000000..2c823219ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(farthest-side at center)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-036-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(farthest-side at center) value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(farthest-side at center);
+ clip-path: circle(farthest-side at center);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-041.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-041.html
new file mode 100644
index 0000000000..faeb4cd3c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-041.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, circle(100%)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-041-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(100%) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(100%);
+ clip-path: circle(100%); /* Rendered as a rectangle */
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.html
new file mode 100644
index 0000000000..b2a3836d15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle()</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-042-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle() value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle();
+ clip-path: circle();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.html
new file mode 100644
index 0000000000..3d73f7e967
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle(closest-side at center) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-042-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(closest-side at center) border-box value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(closest-side at center) border-box;
+ clip-path: circle(closest-side at center) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-left: 10px; /* Not affect layout of the boxes */
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.html
new file mode 100644
index 0000000000..a6f34cfa1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle(farthest-side at center)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-042-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(farthest-side at center) value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(farthest-side at center);
+ clip-path: circle(farthest-side at center);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 12px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-047.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-047.html
new file mode 100644
index 0000000000..8dbc475804
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-047.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, circle(100%)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-047-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(100%) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(100%);
+ clip-path: circle(100%); /* Rendered as a rectangle */
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.html
new file mode 100644
index 0000000000..4e370a31ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-048-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px top 40px) value under vertical-rl writing-mode.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(50% at left 40px top 40px) border-box;
+ clip-path: circle(50% at left 40px top 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-049.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-049.html
new file mode 100644
index 0000000000..d9c5c9ff85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-049.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-049-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at left 40px bottom 40px) value under vertical-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(50% at left 40px bottom 40px) border-box;
+ clip-path: circle(50% at left 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.html
new file mode 100644
index 0000000000..c3f1819022
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-050-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under vertical-lr writing-mode.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(50% at right 40px top 40px) border-box;
+ clip-path: circle(50% at right 40px top 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-051.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-051.html
new file mode 100644
index 0000000000..ebb46d5a26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-051.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-051-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under vertical-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(50% at right 40px bottom 40px) border-box;
+ clip-path: circle(50% at right 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-052.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-052.html
new file mode 100644
index 0000000000..d8c462a563
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-052.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-052-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at right 40px bottom 40px) value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(50% at right 40px bottom 40px) border-box;
+ clip-path: circle(50% at right 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-053.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-053.html
new file mode 100644
index 0000000000..4ee2f880fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-053.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-053-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(50% at right 40px top 40px) border-box;
+ clip-path: circle(50% at right 40px top 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.html
new file mode 100644
index 0000000000..0ee6d036c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-054-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px bottom 40px) value under horizontal-tb writing-mode.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: circle(50% at left 40px bottom 40px) border-box;
+ clip-path: circle(50% at left 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-055.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-055.html
new file mode 100644
index 0000000000..6e159ecd2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-055.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-circle-055-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under horizontal-tb writing-mode.">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: circle(50% at right 40px bottom 40px) border-box;
+ clip-path: circle(50% at right 40px bottom 40px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin-inline-start: 20px;
+ margin-inline-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-056.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-056.html
new file mode 100644
index 0000000000..f708d1f628
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-056.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, offset circle at top left + margin-box + shape-margin</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+ <link rel="match" href="reference/shape-outside-circle-056-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a circle from the margin box and is positioned
+ top left with a shape-margin. Additionally, the
+ shape-outside: circle element is offset from
+ its containing block.">
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(support/Ahem.ttf);
+ }
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ padding: 50px;
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 120px;
+ height: 120px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: margin-box circle(70px at 90px 90px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-integer-overflow-crash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-integer-overflow-crash.html
new file mode 100644
index 0000000000..890bb38fc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-integer-overflow-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1758824">
+
+<style>
+#a {
+ float: right;
+ padding: 30em;
+ shape-outside: margin-box circle(81% at -1px 0px);
+}
+</style>
+<output>
+<shadow id="a">
+<svg>
+</shadow>
+<marquee></marquee>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-013-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-013-ref.html
new file mode 100644
index 0000000000..f4f21058a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-013-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-021-ref.html
new file mode 100644
index 0000000000..835f29265f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-021-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html
new file mode 100644
index 0000000000..875252ac87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ position: relative;
+ font: 15px Ahem, sans-serif;
+ line-height: 20px;
+ width: 200px;
+ height: 200px;
+ color: green;
+ }
+ .ellipse {
+ z-index: -1;
+ width: 160px;
+ height: 80px;
+ border-radius: 80px;
+ background-color: blue;
+ overflow: hidden;
+ }
+ #left-ellipse-outline {
+ position: absolute;
+ top: 20px;
+ left: 0px;
+ }
+ .left-ellipse-float-line {
+ float: left;
+ clear: left;
+ height: 20px;
+ }
+ </style>
+ <body>
+ <p>The test passes if all of the squares are green. There should be no red.</p>
+ <div class="container">
+ X<br/>
+ <div id="left-ellipse-outline"></div>
+ <!-- generated left-rounded-rect-float-line divs will be inserted here -->
+ X<br/>
+ X<br/>
+ X<br/>
+ X<br/>
+ X
+ </div>
+
+ <script src="../../support/rounded-rectangle.js"></script>
+ <script src="../../support/subpixel-utils.js"></script>
+ <script>
+ genLeftRoundedRectFloatShapeOutsideRefTest({
+ roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 20,
+ floatElementClassSuffix: "ellipse-float-line",
+ insertElementIdSuffix: "ellipse-outline"
+ });
+ </script>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-032-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-032-ref.html
new file mode 100644
index 0000000000..41399373d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-032-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(40px 60px at left top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px; top: 0px; left: 40px;"></div>
+ <div class="box" style="height: 24px; top: 36px; left: 32px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 120px; left: 40px;"></div>
+ <div class="box" style="height: 24px; top: 156px; left: 32px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-033-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-033-ref.html
new file mode 100644
index 0000000000..6ed9f09562
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-033-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(40px 60px at right bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
+ <div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 180px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 216px; left: 120px;"></div>
+ <div class="box" style="height: 12px; top: 228px; left: 120px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-034-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-034-ref.html
new file mode 100644
index 0000000000..c981e07108
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-034-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(40px 60px at right top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px; top: 0px; right: 40px;"></div>
+ <div class="box" style="height: 24px; top: 36px; right: 32px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 120px; right: 40px;"></div>
+ <div class="box" style="height: 24px; top: 156px; right: 32px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-035-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-035-ref.html
new file mode 100644
index 0000000000..c9d4bbb6b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-035-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(40px 60px at left bottom)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(40px 60px at left bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
+ <div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px; top: 180px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 216px; right: 120px;"></div>
+ <div class="box" style="height: 12px; top: 228px; right: 120px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-036-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-036-ref.html
new file mode 100644
index 0000000000..ddbb79eaa2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-036-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse() reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-037-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-037-ref.html
new file mode 100644
index 0000000000..6dbe9ec777
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-037-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-038-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-038-ref.html
new file mode 100644
index 0000000000..851d16ffab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-038-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse() reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-039-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-039-ref.html
new file mode 100644
index 0000000000..b7d4e5d975
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-039-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(closest-side farthest-side at right 40px top 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px; top: 24px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-040-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-040-ref.html
new file mode 100644
index 0000000000..c39885e056
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-040-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(0% 0%) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 0px;"></div>
+ <div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 0px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-042-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-042-ref.html
new file mode 100644
index 0000000000..26c36948a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-042-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(0% 0%) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 0px;"></div>
+ <div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 0px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-044-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-044-ref.html
new file mode 100644
index 0000000000..5fd0f7141c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-044-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(100% 100%) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(100% 100%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; left: 80px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-045-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-045-ref.html
new file mode 100644
index 0000000000..c33c34d3cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-045-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(100% 100%) reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(100% 100%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px; top: 0px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 24px; right: 80px;"></div>
+ <div class="box" style="height: 36px; top: 60px; right: 80px;"></div>
+ <div class="box" style="height: 24px; top: 96px; right: 80px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-046-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-046-ref.html
new file mode 100644
index 0000000000..ec88f678a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-046-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-047-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-047-ref.html
new file mode 100644
index 0000000000..cf340ee39d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-047-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-048-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-048-ref.html
new file mode 100644
index 0000000000..9e73dd550b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-048-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-049-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-049-ref.html
new file mode 100644
index 0000000000..e021c6d688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-049-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-050-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-050-ref.html
new file mode 100644
index 0000000000..aab9ddde03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-050-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-051-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-051-ref.html
new file mode 100644
index 0000000000..7e0ef64635
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-051-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ margin-block-end: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-052-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-052-ref.html
new file mode 100644
index 0000000000..519d33864d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-052-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #square {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="line"></div>
+ <div id="square"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-013.html
new file mode 100644
index 0000000000..8a1ce105d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-013.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse radii and position in px</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse with radii and position in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: ellipse(80px 40px at 90px 90px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-014.html
new file mode 100644
index 0000000000..098423a3eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-014.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse radii and position in % units + content-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse from the content box with the position
+ and radii in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: content-box ellipse(50% 25% at 50% 50%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-015.html
new file mode 100644
index 0000000000..965b064a3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-015.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse + closest-side + padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#closest-side">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as an
+ ellipse with the radii explicitly set as closest-side
+ from the padding box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: padding-box ellipse(closest-side closest-side at 75px 80px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html
new file mode 100644
index 0000000000..eb3b093dca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse radii in % units + padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse from the padding box with the radii
+ in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ padding: 25px;
+ border: 10px solid transparent;
+ shape-outside: padding-box ellipse(50% 25%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-017.html
new file mode 100644
index 0000000000..37539192e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-017.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse(farthest-side) + shape-margin + content-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#farthest-side">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse from the content box with only the rx defined
+ as farthest-side and with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 130px;
+ height: 130px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: content-box ellipse(farthest-side closest-side);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-018.html
new file mode 100644
index 0000000000..91c8883934
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-018.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse + shape-margin in % units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse with a shape-margin in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10%;
+ shape-outside: ellipse(40px 28px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-019.html
new file mode 100644
index 0000000000..64983c3a97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-019.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse radii in % units + padding-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse from the padding box with radii in percentage
+ units and with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 120px;
+ height: 120px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: padding-box ellipse(50% 25%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-020.html
new file mode 100644
index 0000000000..be77835dd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-020.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse radii in % units + margin-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse from the margin box with the radii specified
+ in percentage units and with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 100px;
+ height: 100px;
+ margin: 20px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 18px;
+ shape-outside: margin-box ellipse(40% 30% at 80px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-021.html
new file mode 100644
index 0000000000..3f0179cf8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-021.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, ellipse (closest-side px) + shape-margin + padding box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-ellipse-021-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a ellipse from the padding box with rx explicitly
+ set at closest-side and ry in px units and
+ with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ padding: 15px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: padding-box ellipse(closest-side 40px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-022.html
new file mode 100644
index 0000000000..8fd70e4e5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-022.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, ellipse(closest-side px) + shape-margin + content-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-ellipse-021-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a ellipse from the content box with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 120px;
+ height: 120px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: content-box ellipse(closest-side 40%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-023.html
new file mode 100644
index 0000000000..0210eaccdc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-023.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, ellipse + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-ellipse-021-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ an ellipse with only the horizontal offset specifed in px
+ and with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 100px;
+ height: 100px;
+ margin: 20px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 20px;
+ shape-outside: ellipse(at 110px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-024.html
new file mode 100644
index 0000000000..3ec930dbd6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-024.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, ellipse at position (%) + shape-margin (%) + border-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-ellipse-021-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a ellipse positioned from the border box with only
+ the horizontal offset specified in percentage units
+ and with a shape-margin in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 100px;
+ height: 100px;
+ margin: 30px;
+ border: 10px solid transparent;
+ shape-margin: 10%;
+ shape-outside: border-box ellipse(40px 40px at 50%);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-025.html
new file mode 100644
index 0000000000..81878a5f31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-025.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, ellipse radii in % at center right + shape-margin + padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-ellipse-021-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ a ellipse with the radii in percentage units
+ positioned at center right from the margin box
+ with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 110px;
+ height: 110px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 10px;
+ shape-outside: padding-box ellipse(100% 50% at center right);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 140px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 100px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-030.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-030.html
new file mode 100644
index 0000000000..50b213b95e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-030.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse radii in px</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-ellipse-030-ref.html">
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an ellipse with radii in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ font: 15px Ahem, sans-serif;
+ line-height: 20px;
+ width: 400px;
+ height: 200px;
+ color: green;
+ }
+ .ellipse {
+ width: 160px;
+ height: 160px;
+ shape-outside: ellipse(80px 40px at 80px 40px);
+ }
+ </style>
+ <body>
+ <p>The test passes if all of the squares are green. There should be no red.</p>
+ <div class="container">
+ X<br/>
+ <div style="float: left" class="ellipse"></div>
+ <span id="test0">X</span><br/>
+ <span id="test1">X</span><br/>
+ <span id="test2">X</span><br/>
+ <span id="test3">X</span><br/>
+ <span id="test4">X
+ </div>
+ <script src="../support/rounded-rectangle.js"></script>
+ <script src="../support/subpixel-utils.js"></script>
+ <script src="../support/test-utils.js"></script>
+ <script>
+ verifyTextPoints({
+ roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 20
+ }, 9);
+ </script>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html
new file mode 100644
index 0000000000..195ab52e6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, ellipse radii in % units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-ellipse-030-ref.html">
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an ellipse with radii in % units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ font: 15px Ahem, sans-serif;
+ line-height: 20px;
+ width: 400px;
+ height: 200px;
+ color: green;
+ }
+ .ellipse {
+ width: 160px;
+ height: 160px;
+ shape-outside: ellipse(50% 25% at 50% 25%);
+ }
+ </style>
+ <body>
+ <p>The test passes if all of the squares are green. There should be no red.</p>
+ <div class="container">
+ X<br/>
+ <div style="float: left" class="ellipse"></div>
+ <span id="test0">X</span><br/>
+ <span id="test1">X</span><br/>
+ <span id="test2">X</span><br/>
+ <span id="test3">X</span><br/>
+ <span id="test4">X
+ </div>
+ <script src="../support/rounded-rectangle.js"></script>
+ <script src="../support/subpixel-utils.js"></script>
+ <script src="../support/test-utils.js"></script>
+ <script>
+ verifyTextPoints({
+ roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
+ containerWidth: 200,
+ containerHeight: 200,
+ lineHeight: 20
+ }, 9);
+ </script>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.html
new file mode 100644
index 0000000000..f715148e2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-032-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at left top) value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(40px 60px at left top);
+ clip-path: ellipse(40px 60px at left top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-033.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-033.html
new file mode 100644
index 0000000000..50b2f44487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-033.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-033-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at right bottom) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(40px 60px at right bottom);
+ clip-path: ellipse(40px 60px at right bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-034.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-034.html
new file mode 100644
index 0000000000..bedebc9ca3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-034.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-034-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at right top)">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(40px 60px at right top);
+ clip-path: ellipse(40px 60px at right top);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 120px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-035.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-035.html
new file mode 100644
index 0000000000..ac56061455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-035.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(40px 60px at left bottom)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-035-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at left bottom) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(40px 60px at left bottom);
+ clip-path: ellipse(40px 60px at left bottom);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="shape"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ <div class="box" style="height: 12px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.html
new file mode 100644
index 0000000000..dadfe85872
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse()</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-036-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse() value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse();
+ clip-path: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.html
new file mode 100644
index 0000000000..c7ed856513
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-037-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
+ clip-path: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.html
new file mode 100644
index 0000000000..82e8b17749
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse()</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-038-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse() value.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse();
+ clip-path: ellipse();
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.html
new file mode 100644
index 0000000000..b6ea86c325
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(closest-side farthest-side at right 40px top 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-039-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at right 40px top 60px) border-box">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
+ clip-path: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-040.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-040.html
new file mode 100644
index 0000000000..f650fa1eb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-040.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(0% 0%)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-040-ref.html">
+ <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape ellipse(0% 0%) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(0% 0%);
+ clip-path: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-041.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-041.html
new file mode 100644
index 0000000000..8929a7eb26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-041.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(closest-side closest-side at top left)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-040-ref.html">
+ <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top left) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(closest-side closest-side at top left);
+ clip-path: ellipse(closest-side closest-side at top left);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-042.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-042.html
new file mode 100644
index 0000000000..e534eb2c77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-042.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(0% 0%)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-042-ref.html">
+ <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape ellipse(0% 0%) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(0% 0%);
+ clip-path: ellipse(0% 0%);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-043.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-043.html
new file mode 100644
index 0000000000..ede60f8585
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-043.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(closest-side closest-side at top right)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-042-ref.html">
+ <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top right) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(closest-side closest-side at top right);
+ clip-path: ellipse(closest-side closest-side at top right);
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 160px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-044.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-044.html
new file mode 100644
index 0000000000..2d93a65d70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-044.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, ellipse(100% 100%)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-044-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(100% 100%) value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(100% 100%);
+ clip-path: ellipse(100% 100%); /* Rendered as a rectangle */
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-045.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-045.html
new file mode 100644
index 0000000000..99b5faf7f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-045.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, ellipse(100% 100%)</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-045-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(100% 100%) value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(100% 100%);
+ clip-path: ellipse(100% 100%); /* Rendered as a rectangle */
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 20px 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="height: 24px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 36px;"></div>
+ <div class="box" style="height: 24px;"></div>
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-046.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-046.html
new file mode 100644
index 0000000000..f8ff1ae641
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-046.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, ellipse(closest-side farthest-side at top 40px right 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-046-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-047.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-047.html
new file mode 100644
index 0000000000..3a019cf68d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-047.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, ellipse(closest-side farthest-side at top 40px right 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-047-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-048.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-048.html
new file mode 100644
index 0000000000..5a6cc90e25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-048.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-048-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-049.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-049.html
new file mode 100644
index 0000000000..bdb98d9c8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-049.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-049-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-050.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-050.html
new file mode 100644
index 0000000000..18890072a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-050.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-050-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-051.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-051.html
new file mode 100644
index 0000000000..764406a0bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-051.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-ellipse-051-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 10px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-052.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-052.html
new file mode 100644
index 0000000000..25f89533de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-052.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, offset ellipse + shape-margin in % units</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-ellipse-052-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ a ellipse with a shape-margin in pixel units.
+ Additionally, the shape-outside: ellipse element
+ is offset from its containing block.">
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(support/Ahem.ttf);
+ }
+ body {
+ margin: 0;
+ }
+ #container {
+ position: relative;
+ }
+ #test-container {
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ padding: 50px;
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ }
+ #test-shape {
+ float: left;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-margin: 30px;
+ shape-outside: ellipse(40px 28px);
+ }
+ #line {
+ position: absolute;
+ top: 0px;
+ left: 168px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ #failure {
+ position: absolute;
+ top: 80px;
+ left: 170px;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ <br/>
+ <br/>
+ X
+ </div>
+ <div id="line"></div>
+ <div id="failure"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-integer-overflow-crash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-integer-overflow-crash.html
new file mode 100644
index 0000000000..bd892c2cf4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-integer-overflow-crash.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1620671">
+
+<style>
+.a {
+ float: left;
+ min-height: 99vw;
+ shape-outside: ellipse(61% 100% at 34% 62%);
+}
+</style>
+<button class="a">
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html
new file mode 100644
index 0000000000..8e2a5fae12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ #shape {
+ margin-left: 25px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="shape"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-016-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-016-ref.html
new file mode 100644
index 0000000000..0ecdd155de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-016-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, inset(20px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: inset(20px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 40px; top: 0; left: 0;"></div> <!-- Fill the margin and inset space -->
+ <div class="box" style="height: 40px; top: 40px; left: 120px;"></div>
+ <div class="box" style="height: 40px; top: 80px; left: 120px;"></div>
+ <div class="long box" style="height: 40px; top: 120px; left: 0;"></div> <!-- Fill the margin and inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-017-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-017-ref.html
new file mode 100644
index 0000000000..73e73ee7a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-017-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, inset(20px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: inset(20px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 40px; top: 0; right: 0;"></div> <!-- Fill the margin and inset space -->
+ <div class="box" style="height: 40px; top: 40px; right: 120px;"></div>
+ <div class="box" style="height: 40px; top: 80px; right: 120px;"></div>
+ <div class="long box" style="height: 40px; top: 120px; right: 0;"></div> <!-- Fill the margin and inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-020-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-020-ref.html
new file mode 100644
index 0000000000..216aae87f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-020-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float left, inset(10px round 0 40px/ 0 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 0 40px/ 0 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 30px 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-021-ref.html
new file mode 100644
index 0000000000..093efad406
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-021-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float right, inset(10px round 0 40px/ 0 60px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 0 40px/ 0 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 30px 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-022-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-022-ref.html
new file mode 100644
index 0000000000..b4816ce00f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-022-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, inset(10px round 60px 0/ 40px 0) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-023-ref.html
new file mode 100644
index 0000000000..9c7ca35935
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-023-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, inset(10px round 60px 0/ 40px 0) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-024-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-024-ref.html
new file mode 100644
index 0000000000..f2dc323c6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-024-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, inset(10px round 60px 0/ 40px 0) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-025-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-025-ref.html
new file mode 100644
index 0000000000..2758b88e7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-025-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, inset(10px round 60px 0/ 40px 0) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-026-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-026-ref.html
new file mode 100644
index 0000000000..c0325445cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-026-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, inset(10px round 60px 0/ 40px 0) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-027-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-027-ref.html
new file mode 100644
index 0000000000..3791a6f1bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-027-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, inset(10px round 60px 0/ 40px 0) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-010.html
new file mode 100644
index 0000000000..ed821a3015
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-010.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset, px units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ left float with a shape-outside defined as
+ an inset rectangle in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font: 25px/1 Ahem;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 200px;
+ height: 200px;
+ shape-outside: inset(50px 100px 50px 0px);
+ }
+ #static-shape {
+ position: absolute;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ top: 50px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-011.html
new file mode 100644
index 0000000000..9f48592f15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-011.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset, % units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ left float with a shape-outside defined as
+ an inset rectangle in percentage units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 25px;
+ line-height: 1;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 200px;
+ height: 200px;
+ shape-outside: inset(25% 50% 25% 0%);
+ }
+ #static-shape {
+ position: absolute;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ top: 50px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-012.html
new file mode 100644
index 0000000000..30bb563cda
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-012.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset + margin-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ left float with a shape-outside defined as
+ an inset rectangle + margin-box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 25px;
+ line-height: 1;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 50px;
+ height: 50px;
+ border: 25px solid red;
+ margin: 25px;
+ padding: 25px;
+ shape-outside: margin-box inset(50px 100px 50px 0px);
+ }
+ #static-shape {
+ position: absolute;
+ top: 50px;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-013.html
new file mode 100644
index 0000000000..0807a081f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-013.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset + border-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ left float with a shape-outside defined as
+ an inset rectangle + border-box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 25px;
+ line-height: 1;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 50px;
+ height: 50px;
+ border: 25px solid red;
+ margin: 25px;
+ padding: 25px;
+ shape-outside: border-box inset(25px 75px 25px -25px);
+ }
+ #static-shape {
+ position: absolute;
+ top: 50px;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-014.html
new file mode 100644
index 0000000000..d5677d0c81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-014.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset + content-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ left float with a shape-outside defined as
+ an inset rectangle + content-box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 25px;
+ line-height: 1;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 50px;
+ height: 50px;
+ border: 25px solid red;
+ margin: 25px;
+ padding: 25px;
+ shape-outside: content-box inset(-25px 25px -25px -75px);
+ }
+ #static-shape {
+ position: absolute;
+ top: 50px;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-015.html
new file mode 100644
index 0000000000..f809c29159
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-015.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset + padding-box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ left float with a shape-outside defined as
+ an inset rectangle + padding-box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font-family: Ahem;
+ font-size: 25px;
+ line-height: 1;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 50px;
+ height: 50px;
+ border: 25px solid red;
+ margin: 25px;
+ padding: 25px;
+ shape-outside: padding-box inset(0px 50px 0px -50px);
+ }
+ #static-shape {
+ position: absolute;
+ top: 50px;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-016.html
new file mode 100644
index 0000000000..d4ab82ddc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-016.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float left, inset(20px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-016-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(20px) border-box value.">
+ <style>
+ .container {
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: inset(20px) border-box;
+ clip-path: inset(20px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
+ <div class="box" style="height: 40px;"></div>
+ <div class="box" style="height: 40px;"></div>
+ <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-017.html
new file mode 100644
index 0000000000..cf19cc25cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-017.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, inset(20px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-017-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(20px) border-box value.">
+ <style>
+ .container {
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: inset(20px) border-box;
+ clip-path: inset(20px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 60px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
+ <div class="box" style="height: 40px;"></div>
+ <div class="box" style="height: 40px;"></div>
+ <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-020.html
new file mode 100644
index 0000000000..9298827333
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-020.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float left, inset(10px round 0 40px/ 0 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-020-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 0 40px/ 0 60px) border-box value under horizontal-tb writing-mode.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: inset(10px round 0 40px/ 0 60px) border-box;
+ clip-path: inset(10px round 0 40px/ 0 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 30px 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-021.html
new file mode 100644
index 0000000000..e1d48bff71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-021.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float right, inset(10px round 0 40px/ 0 60px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-021-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 0 40px/ 0 60px) border-box value under horizontal-tb writing-mode.">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: inset(10px round 0 40px/ 0 60px) border-box;
+ clip-path: inset(10px round 0 40px/ 0 60px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px 10px;
+ border: solid lightgreen;
+ border-width: 30px 20px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-022.html
new file mode 100644
index 0000000000..5c51dc1a8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-022.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, inset(10px round 60px 0/ 40px 0) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-022-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-023.html
new file mode 100644
index 0000000000..3a97f8327e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-023.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, inset(10px round 60px 0/ 40px 0) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-023-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-rl writing-mode.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-024.html
new file mode 100644
index 0000000000..5de0dad9eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-024.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, inset(10px round 60px 0/ 40px 0) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-024-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-lr writing-mode.">
+ <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-025.html
new file mode 100644
index 0000000000..c843e0f7f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-025.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, inset(10px round 60px 0/ 40px 0) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-025-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-026.html
new file mode 100644
index 0000000000..354ddafaa1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-026.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, inset(10px round 60px 0/ 40px 0) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-026-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-027.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-027.html
new file mode 100644
index 0000000000..69fb1e78b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-027.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, inset(10px round 60px 0/ 40px 0) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-inset-027-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
+ clip-path: inset(10px round 60px 0/ 40px 0) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 10px 20px;
+ border: solid lightgreen;
+ border-width: 20px 30px;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 36px;"></div>
+ <div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html
new file mode 100644
index 0000000000..cbec26ad56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset, px units</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ right float with a shape-outside defined as
+ an inset rounded rectangle in px units with
+ a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font: 25px/1 Ahem;
+ background-color: red;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 200px;
+ height: 200px;
+ shape-margin: 10px;
+ shape-outside: inset(60px 10px 60px 110px round 20px);
+ }
+ #static-shape {
+ position: absolute;
+ left: 100px;
+ width: 100px;
+ height: 100px;
+ top: 50px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html
new file mode 100644
index 0000000000..e7de742500
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, inset, px units</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ right float with a shape-outside defined as
+ an inset irregular elliptically rounded
+ rectangle in px units with a shape-margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font: 25px/1 Ahem;
+ background-color: red;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 200px;
+ height: 200px;
+ shape-margin: 10px;
+ shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px);
+ }
+ #static-shape {
+ position: absolute;
+ left: 100px;
+ width: 100px;
+ height: 100px;
+ top: 50px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html
new file mode 100644
index 0000000000..aac63be701
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, offset inset, px units</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verfies that text flows around a
+ right float with a shape-outside defined as
+ an inset irregular elliptically rounded
+ rectangle in px units with a shape-margin.
+ Additionally, the shape-outside: inset element is
+ offset from its containing block.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ #container {
+ position: relative;
+ margin-left: 25px;
+ }
+ #red {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ }
+ #test-container {
+ width: 200px;
+ height: 200px;
+ font: 25px/1 Ahem;
+ color: green;
+ text-align: right;
+ padding: 50px;
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ }
+ #test-shape {
+ float: right;
+ width: 200px;
+ height: 200px;
+ shape-margin: 10px;
+ shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px);
+ }
+ #static-shape {
+ position: absolute;
+ left: 100px;
+ width: 100px;
+ height: 100px;
+ top: 50px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="red"></div>
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-031.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-031.html
new file mode 100644
index 0000000000..8d323b071e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-031.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, inset and shape-margin</title>
+ <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies a shape with rectangular inset and
+ shape-margin has rounded corners.">
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <style>
+ #container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ margin-left: 25px;
+ }
+ #test-container {
+ /* allow at most 1.5 glyphs to overflow the left edge of #container. */
+ margin-left: -30px;
+ width: 230px;
+ height: 200px;
+ font: 20px/1 Ahem;
+ background-color: red;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ margin-left: 30px;
+ float: right;
+ width: 200px;
+ height: 200px;
+ shape-margin: 70px;
+ shape-outside: inset(95px 40px 95px 150px);
+ }
+ #static-shape {
+ position: absolute;
+ left: 50px;
+ top: 20px;
+ width: 150px;
+ height: 160px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div id="container">
+ <div id="test-container">
+ <div id="test-shape"></div>
+ XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
+ </div>
+ <div id="static-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-refcrash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-refcrash.html
new file mode 100644
index 0000000000..01fd5f51ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-refcrash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="match" href="../../../../reference/ref-filled-green-100px-square-only.html">
+<link rel="help" href="https://crbug.com/962135" />
+<meta name="assert" content="This test passes if the renderer does not crash."/>
+<p>Test passes if there is a filled green square.</p>
+<div style="width: 100px; height: 100px; display: flow-root; background: green;">
+ <div style="width: 20px; height: 20px; float: right;"></div>
+ <div style="width: 20px; height: 10px; display: inline-block;"></div>
+ <div style="width: 40px; height: 20px; overflow: hidden;"></div>
+ <div style="width: 20px; height: 10px; display: inline-block;"></div>
+ <div style="width: 50px; height: 50px; float: left; shape-outside: inset(20px 0 0 0);"></div>
+ <div id="target" style="height: 50px; margin: 10px 0;"></div>
+ <div style="width: 20px; height: 10px; display: inline-block;"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '10px';
+document.body.offsetTop;
+</script>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html
new file mode 100644
index 0000000000..19fc05a183
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #green-square {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="green-square"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html
new file mode 100644
index 0000000000..f1fcdf40d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #green-square {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ width: 240px;
+ height: 240px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="green-square"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-017-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-017-ref.html
new file mode 100644
index 0000000000..56c5b9b855
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-017-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ </head>
+ <style>
+ body {
+ margin: 0;
+ }
+ .line {
+ position: absolute;
+ top: 60px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ .right {
+ left: 220px;
+ }
+ .left {
+ left: 60px;
+ }
+ .top {
+ top: 90px;
+ left: 180px;
+ }
+ .bottom {
+ top: 170px;
+ left: 60px;
+ }
+ .square {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background-color: green;
+ }
+ </style>
+ <body>
+ <p>The test passes if there there are two green squares between the blue lines. There should be no red.</p>
+ <div class="bottom square"></div>
+ <div class="top square"></div>
+ <div class="left line"></div>
+ <div class="right line"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-018-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-018-ref.html
new file mode 100644
index 0000000000..86a84ad970
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-018-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 30px; top: 0; left: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="height: 30px; top: 30px; left: 100px;"></div>
+ <div class="box" style="height: 20px; top: 60px; left: 120px;"></div>
+ <div class="box" style="height: 20px; top: 80px; left: 80px;"></div>
+ <div class="box" style="height: 30px; top: 100px; left: 80px;"></div>
+ <div class="long box" style="height: 30px; top: 130px; left: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-019-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-019-ref.html
new file mode 100644
index 0000000000..ec5cf47fdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-019-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ direction: rtl;
+ position: absolute;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ width: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 30px; top: 0; right: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
+ <div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
+ <div class="box" style="height: 20px; top: 80px; right: 120px;"></div>
+ <div class="box" style="height: 30px; top: 100px; right: 100px;"></div>
+ <div class="long box" style="height: 30px; top: 130px; right: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-020-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-020-ref.html
new file mode 100644
index 0000000000..7a7eb7120f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-020-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-021-ref.html
new file mode 100644
index 0000000000..2cb51b8f0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-021-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-022-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-022-ref.html
new file mode 100644
index 0000000000..7cc0eb6836
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-022-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-023-ref.html
new file mode 100644
index 0000000000..5ec5c24b4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-023-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-024-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-024-ref.html
new file mode 100644
index 0000000000..64bb8e6798
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-024-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-025-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-025-ref.html
new file mode 100644
index 0000000000..c934b148f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-025-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ position: absolute;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ /* Omit shape-outside */
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ border: 20px solid lightgreen;
+ margin: 20px;
+ background-color: orange;
+ }
+
+ .box {
+ position: absolute;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-032-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-032-ref.html
new file mode 100644
index 0000000000..b3f7028eec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-032-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reference File</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #green-square {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ width: 240px;
+ height: 240px;
+ background-color: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="green-square"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html
new file mode 100644
index 0000000000..49b9ee8266
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, polygon, args in px units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-polygon-007-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an polygon with the args in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 200px;
+ height: 200px;
+ shape-outside: polygon(0px 40px, 120px 40px, 120px 80px, 80px 80px, 80px 120px, 160px 120px, 160px 160px, 0px 160px);
+ }
+ .ref-shape {
+ position: absolute;
+ left: 10px;
+ background-color: green;
+ height: 40px;
+ }
+ #ref-1 {
+ top: 90px;
+ width: 120px;
+ }
+ #ref-2 {
+ top: 130px;
+ width: 80px;
+ }
+ #ref-3 {
+ top: 170px;
+ width: 160px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXX XXXXXXXXXX XXXX XXXX XXXXXX XXXXXX XX XX XXXXXXXXXX XXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-008.html
new file mode 100644
index 0000000000..3277f1ea12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-008.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, polygon, args in % units</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-polygon-007-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an polygon with the args in px units.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 200px;
+ height: 200px;
+ shape-outside: polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ left: 10px;
+ height: 40px;
+ }
+ #ref-1 {
+ top: 90px;
+ width: 120px;
+ }
+ #ref-2 {
+ top: 130px;
+ width: 80px;
+ }
+ #ref-3 {
+ top: 170px;
+ width: 160px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXX XXXXXXXXXX XXXX XXXX XXXXXX XXXXXX XX XX XXXXXXXXXX XXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-009.html
new file mode 100644
index 0000000000..f2593c65bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-009.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, polygon + border box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="match" href="reference/shape-outside-polygon-007-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an polygon from the border box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ width: 180px;
+ height: 180px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ border: 10px solid green;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 160px;
+ height: 160px;
+ padding: 10px;
+ border: 10px solid transparent;
+ shape-outside: border-box polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ left: 20px;
+ height: 40px;
+ }
+ #ref-1 {
+ top: 100px;
+ width: 120px;
+ }
+ #ref-2 {
+ top: 140px;
+ width: 80px;
+ }
+ #ref-3 {
+ top: 180px;
+ width: 160px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXX XXXXXXXXX XXX XXX XXXXX XXXXX X X XXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-010.html
new file mode 100644
index 0000000000..a73ab3b904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-010.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, polygon + padding box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
+ <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an polygon from the padding box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 180px;
+ height: 180px;
+ margin: 10px;
+ border: 10px solid transparent;
+ padding: 10px;
+ shape-outside: padding-box polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ left: 10px;
+ height: 40px;
+ }
+ #ref-1 {
+ top: 110px;
+ width: 140px;
+ }
+ #ref-2 {
+ top: 150px;
+ width: 100px;
+ }
+ #ref-3 {
+ top: 190px;
+ width: 180px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXX XXXXX XXXXXXX XXXXXXX XXX XXX
+ XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-011.html
new file mode 100644
index 0000000000..7a79fb94b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-011.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: left float, polygon + content box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ left float with a shape-outside defined as
+ an polygon from the content box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 200px;
+ height: 200px;
+ margin: 5px;
+ border: 10px solid transparent;
+ padding: 5px;
+ shape-outside: content-box polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ left: 10px;
+ height: 40px;
+ }
+ #ref-1 {
+ top: 110px;
+ width: 140px;
+ }
+ #ref-2 {
+ top: 150px;
+ width: 100px;
+ }
+ #ref-3 {
+ top: 190px;
+ width: 180px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXX XXXXX XXXXXXX XXXXXXX XXX XXX
+ XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-012.html
new file mode 100644
index 0000000000..af03658c4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-012.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, polygon + margin-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+ <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ an polygon from the margin box with a shape margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ border: 10px solid transparent;
+ padding: 10px;
+ shape-margin: 20px;
+ shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ }
+ #ref-1 {
+ top: 70px;
+ left: 70px;
+ width: 180px;
+ height: 80px;
+ }
+ #ref-2 {
+ top: 150px;
+ left: 150px;
+ width: 100px;
+ height: 20px;
+ }
+ #ref-3 {
+ top: 170px;
+ left: 130px;
+ width: 120px;
+ height: 60px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-013.html
new file mode 100644
index 0000000000..cf2da759f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-013.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, polygon + border-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ an polygon from the border box with a shape margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 160px;
+ height: 160px;
+ margin: 10px;
+ border: 10px solid transparent;
+ padding: 10px;
+ shape-margin: 10px;
+ shape-outside: border-box polygon(20% 20%, 100% 20%, 100% 90%, 50% 90%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ }
+ #ref-1 {
+ top: 90px;
+ left: 70px;
+ width: 180px;
+ height: 60px;
+ }
+ #ref-2 {
+ top: 150px;
+ left: 170px;
+ width: 80px;
+ height: 40px;
+ }
+ #ref-3 {
+ top: 190px;
+ left: 130px;
+ width: 120px;
+ height: 60px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXXXXXXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-014.html
new file mode 100644
index 0000000000..e81f20f735
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-014.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, polygon + padding-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
+ <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ an polygon from the padding box with a shape margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 180px;
+ height: 180px;
+ margin: 10px;
+ border: 10px solid transparent;
+ padding: 10px;
+ shape-margin: 20px;
+ shape-outside: padding-box polygon(20% 20%, 100% 20%, 100% 90%, 50% 90%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ }
+ #ref-1 {
+ top: 90px;
+ left: 50px;
+ width: 200px;
+ height: 80px;
+ }
+ #ref-2 {
+ top: 150px;
+ left: 150px;
+ width: 100px;
+ height: 40px;
+ }
+ #ref-3 {
+ top: 190px;
+ left: 110px;
+ width: 140px;
+ height: 80px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXXXX XXXXXXXXXXXX XX XX XX XX XXXXXXX XXXXX XXXXX XXXXX XXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-015.html
new file mode 100644
index 0000000000..1d1950fe87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-015.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, polygon + content-box + shape-margin</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
+ <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ an polygon from the content box wtih a shape margin.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 200px;
+ height: 200px;
+ margin: 5px;
+ border: 10px solid transparent;
+ padding: 5px;
+ shape-margin: 20px;
+ shape-outside: content-box polygon(30% 20%, 100% 20%, 100% 80%, 60% 80%, 60% 70%, 80% 70%, 80% 40%, 30% 40%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ }
+ #ref-1 {
+ top: 90px;
+ left: 70px;
+ width: 180px;
+ height: 80px;
+ }
+ #ref-2 {
+ top: 170px;
+ left: 170px;
+ width: 80px;
+ height: 20px;
+ }
+ #ref-3 {
+ top: 190px;
+ left: 130px;
+ width: 120px;
+ height: 60px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-016.html
new file mode 100644
index 0000000000..11cd901640
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-016.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: polygon, evenodd</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that evenodd behaves the
+ same as nonzero for shape-outside and that text
+ will wraps around the outer edge of a polygon.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ font: 20px/1 Ahem;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ color: green;
+ }
+ #test-shape {
+ float: left;
+ width: 200px;
+ height: 200px;
+ shape-outside: polygon(evenodd, 0px 200px, 200px 200px, 200px 40px, 50px 40px, 50px 100px, 150px 100px, 150px 150px, 100px 150px, 100px 0px, 0px 0px);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ left: 10px;
+ }
+ #ref-1 {
+ top: 50px;
+ width: 100px;
+ height: 40px;
+ }
+ #ref-2 {
+ top: 90px;
+ width: 200px;
+ height: 160px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXX XXXXXXX XX XX XX XX XX XX XX XX XXXXXXXXXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html
new file mode 100644
index 0000000000..0d1f9d398e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, polygon + shape-margin beyond margin box</title>
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior">
+ <link rel="match" href="reference/shape-outside-polygon-017-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that when a shape-margin is defined that
+ extends beyond the margin box, the shape is clipped to the
+ box.">
+ </head>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ position: absolute;
+ top: 50px;
+ font: 40px/1 Ahem, sans-serif;
+ width: 300px;
+ height: 200px;
+ color: green;
+ text-align: right;
+ }
+ #test-shape {
+ float: right;
+ width: 180px;
+ height: 160px;
+ margin: 10px;
+ shape-margin: 40px;
+ shape-outside: polygon(0px 130px, 0px 180px, 200px 180px, 200px 0px, 160px 0px, 160px 130px);
+ }
+ .line {
+ position: absolute;
+ top: 60px;
+ width: 2px;
+ height: 200px;
+ border-left: 2px solid blue;
+ }
+ .right {
+ left: 220px;
+ }
+ .left {
+ left: 60px;
+ }
+ .failure {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ z-index: -1;
+ }
+ .square-1 {
+ top: 90px;
+ left: 180px;
+ }
+ .square-2 {
+ top: 170px;
+ left: 60px;
+ }
+ </style>
+ <body>
+ <p>The test passes if there there are two green squares between the blue lines. There should be no red.</p>
+ <div id="container">
+ <div id="test-shape"></div>
+ <br/>
+ X
+ <br/>
+ <br/>
+ X
+ </div>
+ <div class="left line"></div>
+ <div class="right line"></div>
+ <div class="failure square-1"></div>
+ <div class="failure square-2"></div>
+ </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-018.html
new file mode 100644
index 0000000000..832f9606ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-018.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-018-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode.">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="height: 30px;"></div>
+ <div class="box" style="height: 20px;"></div>
+ <div class="box" style="height: 20px;"></div>
+ <div class="box" style="height: 30px;"></div>
+ <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-019.html
new file mode 100644
index 0000000000..62e2f0ad91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-019.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: horizontal-tb, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-019-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode.">
+ <style>
+ .container {
+ writing-mode: horizontal-tb;
+ direction: rtl;
+ width: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ height: 40px;
+ width: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ width: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ width: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="height: 30px;"></div>
+ <div class="box" style="height: 20px;"></div>
+ <div class="box" style="height: 20px;"></div>
+ <div class="box" style="height: 30px;"></div>
+ <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-020.html
new file mode 100644
index 0000000000..4c5ef55391
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-020.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-020-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-021.html
new file mode 100644
index 0000000000..321214b159
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-021.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-rl, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-021-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-rl writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-rl;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-022.html
new file mode 100644
index 0000000000..896e74bf82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-022.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-022-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-023.html
new file mode 100644
index 0000000000..56f1481105
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-023.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: vertical-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-023-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: vertical-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-024.html
new file mode 100644
index 0000000000..9e794492fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-024.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-024-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: left;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-025.html
new file mode 100644
index 0000000000..5e158f925a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-025.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+ <meta charset="utf-8">
+ <title>CSS Shape Test: sideways-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
+ <link rel="match" href="reference/shape-outside-polygon-025-ref.html">
+ <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under sideways-lr writing-mode.">
+ <style>
+ .container {
+ writing-mode: sideways-lr;
+ direction: rtl;
+ inline-size: 200px;
+ line-height: 0;
+ }
+
+ .shape {
+ float: right;
+ shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box;
+ box-sizing: content-box;
+ block-size: 40px;
+ inline-size: 40px;
+ padding: 20px;
+ margin: 20px;
+ border: 20px solid lightgreen;
+ background-color: orange;
+ }
+
+ .box {
+ display: inline-block;
+ inline-size: 80px;
+ background-color: blue;
+ }
+
+ .long {
+ inline-size: 200px;
+ }
+ </style>
+
+ <main class="container">
+ <div class="shape"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 20px;"></div>
+ <div class="box" style="block-size: 30px;"></div>
+ <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space -->
+ </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-032.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-032.html
new file mode 100644
index 0000000000..fc1e2edac6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-032.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: right float, offset polygon + margin-box + shape-margin</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
+ <link rel="match" href="reference/shape-outside-polygon-032-ref.html">
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="The test verifies that text wraps around a
+ right float with a shape-outside defined as
+ an polygon from the margin box with a shape margin.
+ Additionally, the shape-outside: polygon element is
+ offset from its containing block.">
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(support/Ahem.ttf);
+ }
+ body {
+ margin: 0;
+ }
+ #red {
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ width: 240px;
+ height: 240px;
+ background-color: red;
+ }
+ #container {
+ position: absolute;
+ top: 0px;
+ left: -40px;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 20px;
+ width: 240px;
+ height: 240px;
+ padding: 50px;
+ color: green;
+ }
+ #test-shape {
+ float: right;
+ width: 140px;
+ height: 140px;
+ margin: 10px;
+ border: 10px solid transparent;
+ padding: 10px;
+ shape-margin: 20px;
+ shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
+ }
+ .ref-shape {
+ position: absolute;
+ background-color: green;
+ }
+ #ref-1 {
+ top: 70px;
+ left: 70px;
+ width: 180px;
+ height: 80px;
+ }
+ #ref-2 {
+ top: 150px;
+ left: 150px;
+ width: 100px;
+ height: 20px;
+ }
+ #ref-3 {
+ top: 170px;
+ left: 130px;
+ width: 120px;
+ height: 60px;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if there is green square and no red.</p>
+ <div id="red"></div>
+ <div id="container">
+ <div id="test-shape"></div>
+ XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
+ </div>
+ <div id="ref-1" class="ref-shape"></div>
+ <div id="ref-2" class="ref-shape"></div>
+ <div id="ref-3" class="ref-shape"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-crash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-crash.html
new file mode 100644
index 0000000000..de10bf8b74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-crash.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta name="assert" content="This test passes if the renderer does not crash."/>
+<link rel="help" href="https://crbug.com/963580" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div style="float:left; width:200px; height:200px; background: green;"></div>
+x
+<div style="width:200px; height:200px;">
+ <div id="target" style="float:left; width:100px; height:100px; shape-outside:polygon(10px 10px, 20px 20px);"></div>
+ y
+</div>
+<div style="float:left; width:200px; height:200px;"></div>
+<script>
+test(() => {
+ document.body.offsetTop;
+ target.style.shapeOutside = "none";
+ document.body.offsetTop;
+}, 'Test passes if the renderer does not crash.');
+</script>
+
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/rounded-rectangle.js b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/rounded-rectangle.js
new file mode 100644
index 0000000000..3e624322a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/rounded-rectangle.js
@@ -0,0 +1,73 @@
+function ellipseXIntercept(yi, rx, ry)
+{
+ return rx * Math.sqrt(1 - (yi * yi) / (ry * ry));
+}
+
+function scanConvertRoundedRectangleOutside(r, height, lineHeight, corner)
+{
+ var intervals = [];
+ var upperCorner = true;
+ var lowerCorner = true;
+
+ if (corner == "upper")
+ lowerCorner = false;
+ else if (corner == "lower")
+ upperCorner = false;
+
+ for (var y = 0; y < height; y += lineHeight) {
+ if (y + lineHeight <= r.y || y >= r.y + r.height)
+ continue;
+
+ if (upperCorner && (y + lineHeight < r.y + r.ry)) {
+ // within the upper rounded corner part of the rectangle
+ var dx = ellipseXIntercept(y + lineHeight - r.y - r.ry, r.rx, r.ry);
+ intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} );
+ }
+ else if (lowerCorner && (y > r.y + r.height - r.ry)) {
+ // within the lower rounded corner part of the rectangle
+ var dx = ellipseXIntercept(y - (r.y + r.height - r.ry), r.rx, r.ry);
+ intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} );
+ }
+ else // within the rectangle's vertical edges
+ intervals.push( {y: y, left: r.x, right: r.x + r.width} );
+ }
+
+ return intervals;
+}
+
+function genLeftRoundedRectFloatShapeOutsideRefTest(args)
+{
+ var leftRoundedRect = args.roundedRect;
+ var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight, args.corner);
+ var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) {
+ var width = SubPixelLayout.snapToLayoutUnit(interval.right);
+ var cls = "left-" + args.floatElementClassSuffix;
+ return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
+ });
+ document.getElementById("left-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', leftFloatDivs.join("\n"));
+ return leftFloatDivs;
+}
+
+function getRoundedRectLeftEdge(args)
+{
+ var leftRoundedRect = args.roundedRect;
+ var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight, args.corner);
+ var leftSidePoints = leftRoundedRectIntervals.map(function(interval) {
+ var width = SubPixelLayout.snapToLayoutUnit(interval.right);
+ return width;
+ });
+ return leftSidePoints;
+}
+
+function genRightRoundedRectFloatShapeOutsideRefTest(args)
+{
+ var rightRoundedRect = Object.create(args.roundedRect);
+ rightRoundedRect.x = args.containerWidth - args.roundedRect.width;
+ var rightRoundedRectIntervals = scanConvertRoundedRectangleOutside(rightRoundedRect, args.containerHeight, args.lineHeight, args.corner);
+ var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) {
+ var width = args.containerWidth - SubPixelLayout.snapToLayoutUnit(interval.left);
+ var cls = "right-" + args.floatElementClassSuffix;
+ return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
+ });
+ document.getElementById("right-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', rightFloatDivs.join("\n"));
+}
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/subpixel-utils.js b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/subpixel-utils.js
new file mode 100644
index 0000000000..50bf0989f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/subpixel-utils.js
@@ -0,0 +1,26 @@
+var SubPixelLayout = (function() {
+ var enabled = undefined;
+
+ function isEnabled()
+ {
+ if (enabled === undefined) {
+ var elem = document.createElement('div');
+ elem.style.setProperty('width', '4.5px');
+ document.body.appendChild(elem);
+ var bounds = elem.getBoundingClientRect();
+ enabled = (bounds.width != Math.floor(bounds.width));
+ document.body.removeChild(elem);
+ }
+ return enabled;
+ }
+
+ return {
+ isEnabled: isEnabled,
+ snapToLayoutUnit: function(f) {
+ return isEnabled() ? Math.floor(f * 64) / 64 : Math.floor(f); // as in LayoutUnit(f).toFloat()
+ },
+ ceilSnapToLayoutUnit: function(f) {
+ return isEnabled() ? Math.ceil(f * 64) / 64 : Math.ceil(f); // see ceiledLayoutUnit(), LayoutUnit.h
+ }
+ }
+}()); \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/test-utils.js b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/test-utils.js
new file mode 100644
index 0000000000..906fe65608
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/test-utils.js
@@ -0,0 +1,27 @@
+function verifyTextPoints(shape, numLines, tolerance, side) {
+ var passed = true;
+ if (tolerance === undefined)
+ tolerance = 0.5;
+ if (side === undefined)
+ side = "left";
+
+ if (side === "right")
+ shape.roundedRect.x = shape.containerWidth - (shape.roundedRect.x + shape.roundedRect.width);
+
+ var expected = getRoundedRectLeftEdge(shape);
+
+ for(var i = 0; i < numLines; i++) {
+ var line = document.getElementById('test'+i);
+ var actual = line.getBoundingClientRect().left;
+ if (side === "right")
+ actual = shape.containerWidth - (actual + line.getBoundingClientRect().width);
+
+ if( Math.abs( (actual - expected[i])) > tolerance ){
+ line.style.setProperty('color', 'red');
+ console.log('diff: ' + Math.abs(actual - expected[i]));
+ passed = false;
+ }
+ }
+
+ return passed;
+}
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html
new file mode 100644
index 0000000000..e7a84d60a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Image Threshold - Valid values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property">
+ <meta name="assert" content="shape-image-threshold is any valid number and computed the
+ clipped value between 0 and 1.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_image_threshold_valid_tests = [
+ {
+ "actual": "0.0",
+ "expected_inline": "0",
+ "expected_computed": "0"
+ },
+ {
+ "actual": ".2",
+ "expected_inline": "0.2",
+ "expected_computed": "0.2"
+ },
+ {
+ "actual": "0.333",
+ "expected_inline": "0.333",
+ "expected_computed": "0.333"
+ },
+ {
+ "actual": "1.0",
+ "expected_inline": "1",
+ "expected_computed": "1"
+ },
+ {
+ "actual": "1.5",
+ "expected_inline": "1.5",
+ "expected_computed": "1"
+ }
+ ];
+ generate_tests( ParsingUtils.testShapeThresholdInlineStyle,
+ ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'inline') );
+ generate_tests( ParsingUtils.testShapeThresholdComputedStyle,
+ ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'computed') );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html
new file mode 100644
index 0000000000..0fc8c7c43a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Image Threshold - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property">
+ <meta name="assert" content="shape-image-threshold may take calc values and computed the
+ clipped value between 0 and 1.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_image_threshold_valid_tests = [
+ {
+ "actual": "calc(10/100)",
+ "expected_computed": "0.1"
+ },
+ {
+ "actual": "calc(10/100 + 30/100)",
+ "expected_computed": "0.4"
+ },
+ {
+ "actual": "calc(150/100)",
+ "expected_computed": "1"
+ },
+ {
+ "actual": "calc(150/100 - 2)",
+ "expected_computed": "0"
+ }
+ ];
+ generate_tests( ParsingUtils.testShapeThresholdComputedStyle,
+ ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'computed') );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html
new file mode 100644
index 0000000000..f992e429f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Image Threshold - Invalid values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property">
+ <meta name="assert" content="shape-image-threshold is set to 0 when an invalid value is specified.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ // TODO
+ var shape_image_threshold_invalid_tests = [
+ {"name": "-0.5" },
+ {"name": "-100" },
+ {"name": "nonNumber" },
+ {"name": "3/4" },
+ {"name": "20%" }
+ ];
+ generate_tests( ParsingUtils.testShapeThresholdInlineStyle,
+ ParsingUtils.buildTestCases(shape_image_threshold_invalid_tests, 'inline - invalid') );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html
new file mode 100644
index 0000000000..135ce5d028
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Image Threshold Inherit</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property">
+ <meta name="assert" content="shape-outside can be assigned the 'inherit' value and does not inherit by default.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ function setUpTest(parentValue, childValue) {
+ var outer = document.createElement("div");
+ var inner = document.createElement("div");
+ outer.appendChild(inner);
+
+ outer.style.setProperty("shape-outside", "content-box");
+ outer.style.setProperty("shape-image-threshold", parentValue);
+ inner.style.setProperty("shape-outside", "circle()");
+ inner.style.setProperty("shape-image-threshold", childValue);
+
+ document.body.appendChild(outer);
+
+ var inline = inner.style.getPropertyValue("shape-image-threshold");
+ var style = getComputedStyle(inner);
+ var computed = style.getPropertyValue("shape-image-threshold");
+ document.body.removeChild(outer);
+
+ return [inline, computed];
+ }
+
+ test(function() {
+ var results = setUpTest("0.5", "inherit");
+ assert_equals(results[0], "inherit");
+ assert_equals(results[1], "0.5");
+ }, "shape-image-threshold can be assigned 'inherit' value");
+
+ test(function() {
+ var results = setUpTest("0.3", null);
+ assert_equals(results[0], "");
+ assert_equals(results[1], "0");
+ }, "shape-image-threshold is not inherited and defaults to 0");
+
+ test(function() {
+ var results = setUpTest("0.2", "0.5");
+ assert_equals(results[0], "0.5");
+ assert_equals(results[1], "0.5");
+ }, "shape-margin is not inherited");
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html
new file mode 100644
index 0000000000..d6ae34976f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Margin Valid Values - Length or Percentage</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <meta name="assert" content="shape-margin values may be either a length or percentage">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_margin_valid_tests = [
+ {
+ "actual": "10px",
+ "expected_inline": "10px",
+ "expected_computed": "10px"
+ },
+ {
+ "actual": "10%",
+ "expected_inline": "10%",
+ "expected_computed": "10%"
+ }
+ ];
+ generate_tests( ParsingUtils.testShapeMarginInlineStyle,
+ ParsingUtils.buildTestCases(shape_margin_valid_tests, "inline"));
+ generate_tests( ParsingUtils.testShapeMarginComputedStyle,
+ ParsingUtils.buildTestCases(shape_margin_valid_tests, "computed"));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html
new file mode 100644
index 0000000000..205241bbfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Margin Valid Values - Length Units</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <meta name="assert" content="shape-margin values may be in any length unit">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ setup({explicit_done: true});
+ var shape_margin_valid_unit_tests = [];
+ ParsingUtils.validUnits.forEach(function(unit) {
+ test = "10"+unit;
+ testCase = new Object();
+ // actual & expected_inline should be the same
+ // expected_computed will get converted to the px value in the test framework
+ testCase["actual"] = test;
+ testCase["expected_inline"] = test;
+ testCase["expected_computed"] = test;
+ shape_margin_valid_unit_tests.push(testCase);
+ });
+
+ generate_tests( ParsingUtils.testShapeMarginInlineStyle,
+ ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "inline"));
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ generate_tests( ParsingUtils.testShapeMarginComputedStyle,
+ ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "computed"));
+ ParsingUtils.restoreFonts();
+ done();
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html
new file mode 100644
index 0000000000..18532ca173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Margin Valid Values - Decimal, Positive/Negative lengths</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <meta name="assert" content="shape-margin values may be either a length or percentage">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_margin_valid_tests = [
+ {
+ "actual": "10.12345px",
+ "expected_inline": "10.12345px",
+ "expected_computed": "10.12345px"
+ },
+ {
+ "actual": ".5px",
+ "expected_inline": "0.5px",
+ "expected_computed": "0.5px"
+ },
+ {
+ "actual": "+15px",
+ "expected_inline": "15px",
+ "expected_computed": "15px"
+ },
+ {
+ "actual": "+10.678px",
+ "expected_inline": "10.678px",
+ "expected_computed": "10.678px"
+ },
+ ];
+ generate_tests( ParsingUtils.testShapeMarginInlineStyle,
+ ParsingUtils.buildTestCases(shape_margin_valid_tests, "inline"));
+ generate_tests( ParsingUtils.testShapeMarginComputedStyle,
+ ParsingUtils.buildTestCases(shape_margin_valid_tests, "computed"));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html
new file mode 100644
index 0000000000..8c3336e27e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Margin Valid Values - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <meta name="assert" content="shape-margin values may be calc() values">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_margin_calc_tests = [];
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = [ value[0], value[1] ];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([ value[2][0], value[2][1] ]);
+ } else {
+ testCase.push( value[2] );
+ }
+ shape_margin_calc_tests.push(testCase);
+ });
+ generate_tests( ParsingUtils.testShapeMarginInlineStyle,
+ ParsingUtils.buildCalcTests(shape_margin_calc_tests, "inline"));
+ generate_tests( ParsingUtils.testShapeMarginComputedStyle,
+ ParsingUtils.buildCalcTests(shape_margin_calc_tests, "computed"));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html
new file mode 100644
index 0000000000..f87adb4b33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Margin Invalid Values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <meta name="assert" content="shape-margin values may only be positive length units.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_margin_invalid_tests = [
+ {"name": "-20px"},
+ {"name": "-.4567px"},
+ {"name": "nonLength"},
+ {"name": "10"}
+ ];
+ generate_tests( ParsingUtils.testShapeMarginInlineStyle,
+ ParsingUtils.buildTestCases(shape_margin_invalid_tests, "inline - invalid"));
+ generate_tests( ParsingUtils.testShapeMarginComputedStyle,
+ ParsingUtils.buildTestCases(shape_margin_invalid_tests, "computed - invalid"));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html
new file mode 100644
index 0000000000..d39111115c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Margin - inherit</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
+ <meta name="assert" content="The shape-margin value is not inherited and can be assigned the 'inherit' value.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+
+ function setUpTest(parentValue, childValue) {
+ var outer = document.createElement("div");
+ var inner = document.createElement("div");
+ outer.appendChild(inner);
+
+ outer.style.setProperty("shape-outside", "content-box");
+ outer.style.setProperty("shape-margin", parentValue);
+ inner.style.setProperty("shape-outside", "circle()");
+ inner.style.setProperty("shape-margin", childValue);
+
+ document.body.appendChild(outer);
+
+ var inline = inner.style.getPropertyValue("shape-margin");
+ var style = getComputedStyle(inner);
+ var computed = style.getPropertyValue("shape-margin");
+ document.body.removeChild(outer);
+
+ return [inline, computed];
+ }
+
+ test(function() {
+ var results = setUpTest("10px", "inherit");
+ assert_equals(results[0], "inherit");
+ assert_equals(results[1], "10px");
+ }, "shape-margin can be assigned 'inherit' value");
+
+ test(function() {
+ var results = setUpTest("5px", null);
+ assert_equals(results[0], "");
+ assert_equals(results[1], "0px");
+ }, "shape-margin is not inherited and defaults to 0px");
+
+ test(function() {
+ var results = setUpTest("15px", "10px");
+ assert_equals(results[0], "10px");
+ assert_equals(results[1], "10px");
+ }, "shape-margin is not inherited");
+
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html
new file mode 100644
index 0000000000..f5b2ec7e89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Box Valid Values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-shape-box">
+ <meta name="assert" content="Shape-outside may be one of the box model box values">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_shape_boxes = [
+ {
+ "actual": "content-box",
+ "expected_inline": "content-box",
+ "expected_computed": "content-box"
+ },
+ {
+ "actual": "padding-box",
+ "expected_inline": "padding-box",
+ "expected_computed": "padding-box"
+ },
+ {
+ "actual": "border-box",
+ "expected_inline": "border-box",
+ "expected_computed": "border-box"
+ },
+ {
+ "actual": "margin-box",
+ "expected_inline": "margin-box",
+ "expected_computed": "margin-box"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_shape_boxes, 'inline') );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_shape_boxes, 'computed') );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html
new file mode 100644
index 0000000000..e2c735b3bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Valid Formats</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A circular basic shape has an optional radius and position component">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_circle_tests = [
+ {
+ "name": "No arguments",
+ "actual": "circle()",
+ "expected_inline": "circle()",
+ "expected_computed": "circle()"
+ },
+ {
+ "name": "Radial argument only",
+ "actual": "circle(50px)",
+ "expected_inline": "circle(50px)",
+ "expected_computed": "circle(50px)"
+ },
+ {
+ "name": "Position argument only",
+ "actual": "circle(at 50px 50px)",
+ "expected_inline": "circle(at 50px 50px)",
+ "expected_computed": "circle(at 50px 50px)"
+ },
+ {
+ "name": "Radial and position argument",
+ "actual": "circle(50px at 50px 50px)",
+ "expected_inline": "circle(50px at 50px 50px)",
+ "expected_computed": "circle(50px at 50px 50px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_circle_tests, 'inline')
+ );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_circle_tests, 'computed')
+ );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html
new file mode 100644
index 0000000000..da0be6904e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Valid Radii</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A circle's radius may be a length, percentage, or keyword.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('circle', 'inline'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html
new file mode 100644
index 0000000000..3569dd8b81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Valid Positions</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths">
+ <meta name="assert" content="A circle's position argument may be any of the valid combinations:
+ [ percentage|length left|center|right ]
+ or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ]
+ or [ left|center|right ]
+ or [ left|center|right top|center|bottom ]
+ or [ top|center|bottom ]. ">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('circle', true, 'inline', 'px'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('circle', true, 'computed', 'px'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html
new file mode 100644
index 0000000000..8364e5d39c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Invalid Position Argument Lists</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="Valid circle position argument list are in the form of:
+ [ percentage|length left|center|right ]
+ or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ]
+ or [ left|center|right ]
+ or [ left|center|right top|center|bottom ]
+ or [ top|center|bottom ].
+ All position arguments not in this form are invalid.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests("circle", false, "px"));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html
new file mode 100644
index 0000000000..c28172c333
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle - Position Length Units</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths">
+ <meta name="assert" content="A circle's position arguments may in any valid <length> unit allowed by a <position> value.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ setup({explicit_done: true});
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + inline', ParsingUtils.validUnits) );
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + computed', ParsingUtils.validUnits) );
+ ParsingUtils.restoreFonts();
+ done();
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html
new file mode 100644
index 0000000000..55a7f07acf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Valid Radii - length units</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A circle's radius may be in any valid length unit.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ setup({explicit_done: true});
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + inline', ParsingUtils.validUnits));
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + computed', ParsingUtils.validUnits));
+ ParsingUtils.restoreFonts();
+ done();
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html
new file mode 100644
index 0000000000..15308ed9d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Radii - positive/negative, decimal/non-decimal</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A circle's radius may be in signed positive or decimal/non-decimal format. Negative
+ radii are invalid.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_circle_radii_tests = [
+ {
+ "actual": "circle(+10px at 50% 50%)",
+ "expected_inline": "circle(10px at 50% 50%)",
+ "expected_computed": "circle(10px at 50% 50%)"
+ },
+ {
+ "actual": "circle(+10.00px at 50% 50%)",
+ "expected_inline": "circle(10px at 50% 50%)",
+ "expected_computed": "circle(10px at 50% 50%)"
+ },
+ {
+ "actual": "circle(+20.340px at 50% 50%)",
+ "expected_inline": "circle(20.34px at 50% 50%)",
+ "expected_computed": "circle(20.34px at 50% 50%)"
+ },
+ {
+ "actual": "circle(+30.5px at 50% 50%)",
+ "expected_inline": "circle(30.5px at 50% 50%)",
+ "expected_computed": "circle(30.5px at 50% 50%)"
+ },
+ {
+ "actual": "circle(+10% at 50% 50%)",
+ "expected_inline": "circle(10% at 50% 50%)",
+ "expected_computed": "circle(10% at 50% 50%)"
+ },
+ {
+ "actual": "circle(+10.00% at 50% 50%)",
+ "expected_inline": "circle(10% at 50% 50%)",
+ "expected_computed": "circle(10% at 50% 50%)"
+ },
+ {
+ "actual": "circle(+20.350% at 50% 50%)",
+ "expected_inline": "circle(20.35% at 50% 50%)",
+ "expected_computed": "circle(20.35% at 50% 50%)"
+ },
+ {
+ "actual": "circle(+30.5% at 50% 50%)",
+ "expected_inline": "circle(30.5% at 50% 50%)",
+ "expected_computed": "circle(30.5% at 50% 50%)"
+ },
+ {
+ "actual": "circle(+10px)",
+ "expected_inline": "circle(10px)",
+ "expected_computed": "circle(10px)"
+ },
+ {
+ "actual": "circle(+10.00px)",
+ "expected_inline": "circle(10px)",
+ "expected_computed": "circle(10px)"
+ },
+ {
+ "actual": "circle(+20.340px)",
+ "expected_inline": "circle(20.34px)",
+ "expected_computed": "circle(20.34px)"
+ },
+ {
+ "actual": "circle(+30.5px)",
+ "expected_inline": "circle(30.5px)",
+ "expected_computed": "circle(30.5px)"
+ },
+ {
+ "actual": "circle(+10%)",
+ "expected_inline": "circle(10%)",
+ "expected_computed": "circle(10%)"
+ },
+ {
+ "actual": "circle(+10.00%)",
+ "expected_inline": "circle(10%)",
+ "expected_computed": "circle(10%)"
+ },
+ {
+ "actual": "circle(+20.350%)",
+ "expected_inline": "circle(20.35%)",
+ "expected_computed": "circle(20.35%)"
+ },
+ {
+ "actual": "circle(+30.5%)",
+ "expected_inline": "circle(30.5%)",
+ "expected_computed": "circle(30.5%)"
+ }
+ ];
+ invalid_circle_radii_tests = [
+ {"name": "circle(-20px)"},
+ {"name": "circle(-20.340px)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_circle_radii_tests, 'inline') );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_circle_radii_tests, 'computed') );
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_circle_radii_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html
new file mode 100644
index 0000000000..b3f8fadaa2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Radii - invalid args</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="This test verifies that invalid shape-radius arguments on circle() don't parse.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var invalid_circle_radiii_tests = [
+ {"name": "circle(foo)"},
+ {"name": "circle(10)"},
+ {"name": "circle(20px 30px)"},
+ {"name": "circle(20% 30%)"},
+ {"name": "circle(20px, 30px)"},
+ {"name": "circle(20%, 30%)"},
+ {"name": "circle(20px closest-side)"},
+ {"name": "circle(20px farthest-side)"},
+ {"name": "circle(closest-side 20px)"},
+ {"name": "circle(farthest-side 20px)"},
+ {"name": "circle(20% closest-side)"},
+ {"name": "circle(20% farthest-side)"},
+ {"name": "circle(closest-side 20%)"},
+ {"name": "circle(farthest-side 20%)"},
+ {"name": "circle(closest-side farthest-side)"},
+ {"name": "circle(farthest-side closest-side)"}
+ ];
+ generate_tests(ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_circle_radiii_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html
new file mode 100644
index 0000000000..64aa9c3599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Invalid Position Argument Values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="This test verifies that invalid position arguments on circle() don't parse">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var invalid_circle_position_tests = [
+ {"name": "circle(at foo)"},
+ {"name": "circle(at 50)"},
+ {"name": "circle(at 10px 20px 30px)"},
+ {"name": "circle(at 20% 30% 40%)"},
+ {"name": "circle(at 20px, 30px)"},
+ {"name": "circle(at 20%, 30%)"},
+ {"name": "circle(at 20px, 30px, 40px)"},
+ {"name": "circle(at 20%, 30%, 40%)"},
+ {"name": "circle(at closest-side)"},
+ {"name": "circle(at farthest-side)"},
+ {"name": "circle(at 20px 30px closest-side)"},
+ {"name": "circle(at 20px 30px farthest-side)"},
+ {"name": "circle(at 20px 30px foo)"},
+ {"name": "circle(at closest-side 20px 30px)"},
+ {"name": "circle(at farthest-side 20px 30px)"},
+ {"name": "circle(at 20% 30% closest-side)"},
+ {"name": "circle(at 20% 30% farthest-side)"},
+ {"name": "circle(at closest-side 20% 30%)"},
+ {"name": "circle(at farthest-side 20% 30%)"},
+ {"name": "circle(at closest-side farthest-side 20px)"},
+ {"name": "circle(at closest-side farthest-side 20%)"},
+ {"name": "circle(at farthest-side closest-side closest-side)"},
+ {"name": "circle(at farthest-side, closest-side, closest-side)"},
+ {"name": "circle(at left 50x top 50px bottom)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_circle_position_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html
new file mode 100644
index 0000000000..1aebc3cf09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle Position Arguments - positive/negative, decimal/non-decimal</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A circle's position arguments may be in signed positive/negative or
+ decimal/non-decimal format.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_circle_radii_tests = [
+ {
+ "actual": "circle(at +50px)",
+ "expected_inline": "circle(at 50px 50%)",
+ "expected_computed": "circle(at 50px 50%)"
+ },
+ {
+ "actual": "circle(at -50px)",
+ "expected_inline": "circle(at -50px 50%)",
+ "expected_computed": "circle(at -50px 50%)"
+ },
+ {
+ "actual": "circle(at +50%)",
+ "expected_inline": "circle(at 50% 50%)",
+ "expected_computed": "circle(at 50% 50%)"
+ },
+ {
+ "actual": "circle(at -50%)",
+ "expected_inline": "circle(at -50% 50%)",
+ "expected_computed": "circle(at -50% 50%)"
+ },
+ {
+ "actual": "circle(at left +50px)",
+ "expected_inline": "circle(at 0% 50px)",
+ "expected_computed": "circle(at 0% 50px)"
+ },
+ {
+ "actual": "circle(at left +50%)",
+ "expected_inline": "circle(at 0% 50%)",
+ "expected_computed": "circle(at 0% 50%)"
+ },
+ {
+ "actual": "circle(at right -50px)",
+ "expected_inline": "circle(at 100% -50px)",
+ "expected_computed": "circle(at 100% -50px)"
+ },
+ {
+ "actual": "circle(at right -50%)",
+ "expected_inline": "circle(at 100% -50%)",
+ "expected_computed": "circle(at 100% -50%)"
+ },
+ {
+ "actual": "circle(at +50px top)",
+ "expected_inline": "circle(at 50px 0%)",
+ "expected_computed": "circle(at 50px 0%)"
+ },
+ {
+ "actual": "circle(at +50% top)",
+ "expected_inline": "circle(at 50% 0%)",
+ "expected_computed": "circle(at 50% 0%)"
+ },
+ {
+ "actual": "circle(at -50px bottom)",
+ "expected_inline": "circle(at -50px 100%)",
+ "expected_computed": "circle(at -50px 100%)"
+ },
+ {
+ "actual": "circle(at -50% bottom)",
+ "expected_inline": "circle(at -50% 100%)",
+ "expected_computed": "circle(at -50% 100%)"
+ },
+ {
+ "actual": "circle(at +50px +50px)",
+ "expected_inline": "circle(at 50px 50px)",
+ "expected_computed": "circle(at 50px 50px)"
+ },
+ {
+ "actual": "circle(at +50% +50%)",
+ "expected_inline": "circle(at 50% 50%)",
+ "expected_computed": "circle(at 50% 50%)"
+ },
+ {
+ "actual": "circle(at -50px -50px)",
+ "expected_inline": "circle(at -50px -50px)",
+ "expected_computed": "circle(at -50px -50px)"
+ },
+ {
+ "actual": "circle(at +50px -50px)",
+ "expected_inline": "circle(at 50px -50px)",
+ "expected_computed": "circle(at 50px -50px)"
+ },
+ {
+ "actual": "circle(at -50px +50px)",
+ "expected_inline": "circle(at -50px 50px)",
+ "expected_computed": "circle(at -50px 50px)"
+ },
+ {
+ "actual": "circle(at +50% -50%)",
+ "expected_inline": "circle(at 50% -50%)",
+ "expected_computed": "circle(at 50% -50%)"
+ },
+ {
+ "actual": "circle(at -50% +50%)",
+ "expected_inline": "circle(at -50% 50%)",
+ "expected_computed": "circle(at -50% 50%)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_circle_radii_tests, 'inline') );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_circle_radii_tests, 'computed') );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html
new file mode 100644
index 0000000000..609632e11a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle args - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+ <meta name="assert" content="A circle's arguments may be in calc() values.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var circle_calc_tests = [];
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['circle('+ value[0] + ' at 50% 50%)', 'circle('+ value[1] + ' at 50% 50%)'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([ 'circle('+ value[2][0] + ' at 50% 50%)', 'circle('+ value[2][1] + ' at 50% 50%)']);
+ } else {
+ testCase.push('circle('+ value[2] + ' at 50% 50%)');
+ }
+ circle_calc_tests.push(testCase);
+ });
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(circle_calc_tests, 'value'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(circle_calc_tests, 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html
new file mode 100644
index 0000000000..cca245e411
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Circle position args - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+ <meta name="assert" content="A circle's <position> arguments may be in calc() values.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var circle_position_calc_tests = [];
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['circle(at '+ value[0] +')',
+ 'circle(at '+ value[1] +' 50%)'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([ 'circle(at '+ value[2][0] +' 50%)',
+ 'circle(at '+ value[2][1] +' 50%)'
+ ]);
+ } else {
+ testCase.push('circle(at '+ value[2] +' 50%)');
+ }
+ circle_position_calc_tests.push(testCase);
+ });
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(circle_position_calc_tests, 'inline'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(circle_position_calc_tests, 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html
new file mode 100644
index 0000000000..26cae2e806
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Basic Shape Computed Font Relative Lengths</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#computed">
+ <meta name="assert" content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ // font relative units: em, ex, ch, rem
+ var units = ['em', 'ex', 'ch', 'rem'];
+ var resolveds = {};
+ ParsingUtils.setupFonts();
+
+ var div = document.createElement('div');
+ document.body.appendChild(div);
+ units.forEach(function(unit) {
+ div.style.width = '10' + unit;
+ var s = getComputedStyle(div);
+ resolveds[unit] = parseFloat(s.width);
+ });
+ document.body.removeChild(div);
+
+ function fillArray(string, length) {
+ return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string);
+ }
+
+ function testUnit(unit) {
+ var relativeLength = '1' + unit;
+ var usedLength = resolveds[unit] + 'px';
+
+ var input = 'polygon(nonzero, ' + fillArray('10' + unit, 2).join(' ') + ')';
+ var output = 'polygon(' + fillArray(resolveds[unit] + 'px', 2).join(' ') + ')';
+
+ ParsingUtils.testComputedStyle(input, ParsingUtils.roundResultStr(output));
+ }
+
+ var tests = units.map(function(unit) {
+ return [unit + ' units', unit];
+ });
+
+ generate_tests(testUnit, tests);
+
+ ParsingUtils.restoreFonts();
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html
new file mode 100644
index 0000000000..97d16b9dbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Basic Shape Computed Percentage Lengths</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#computed">
+ <meta name="assert" content="The basic shape can contain percentages, which remain unchanged when computed">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_polygon_tests = [
+ {
+ "name": "inset",
+ "actual": "inset(10% 20% 30% 40% round 10% 20% 30% 40% / 10% 20% 30% 40%)",
+ "expected_computed": "inset(10% 20% 30% 40% round 10% 20% 30% 40%)"
+ },
+ {
+ "name": "circle",
+ "actual": "circle(10% at 10% 20%)",
+ "expected_computed": "circle(10% at 10% 20%)"
+ },
+ {
+ "name": "ellipse",
+ "actual": "ellipse(10% 20% at 10% 20%)",
+ "expected_computed": "ellipse(10% 20% at 10% 20%)"
+ },
+ {
+ "name": "polygon",
+ "actual": "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)",
+ "expected_computed": "polygon(10% 20%, 30% 40%, 50% 60%)"
+ }
+ ];
+
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_polygon_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html
new file mode 100644
index 0000000000..d74ed97a76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Valid Formats</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An elliptical basic shape has two optional components, radii (2) and a position.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_ellipse_tests = [
+ {
+ "name": "No arguments",
+ "actual": "ellipse()",
+ "expected_inline": "ellipse()",
+ "expected_computed": "ellipse()"
+ },
+ {
+ "name": "Radial arguments",
+ "actual": "ellipse(50px 50px)",
+ "expected_inline": "ellipse(50px 50px)",
+ "expected_computed": "ellipse(50px 50px)"
+ },
+ {
+ "name": "Position argument",
+ "actual": "ellipse(at 50px 50px)",
+ "expected_inline": "ellipse(at 50px 50px)",
+ "expected_computed": "ellipse(at 50px 50px)"
+ },
+ {
+ "name": "Radial and position argument",
+ "actual": "ellipse(50px 50px at 50px 50px)",
+ "expected_inline": "ellipse(50px 50px at 50px 50px)",
+ "expected_computed": "ellipse(50px 50px at 50px 50px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_ellipse_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_ellipse_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html
new file mode 100644
index 0000000000..dfefbbb5c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Valid Radii</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An elliptical basic shape's radii may be keywords, lengths or percentages">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('ellipse', 'inline'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('ellipse', 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html
new file mode 100644
index 0000000000..07e1859e6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Valid Positions</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths">
+ <meta name="assert" content="An ellipse's position argument may be any of the valid combinations:
+ [ percentage|length left|center|right ]
+ or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ]
+ or [ left|center|right ]
+ or [ left|center|right top|center|bottom ]
+ or [ top|center|bottom ]. ">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('ellipse', true, 'inline', 'px'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('ellipse', true, 'computed', 'px'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html
new file mode 100644
index 0000000000..c39e683510
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Invalid Position Argument Lists</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="Valid ellipse position argument list are in the form of:
+ [ percentage|length left|center|right ]
+ or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ]
+ or [ left|center|right ]
+ or [ left|center|right top|center|bottom ]
+ or [ top|center|bottom ].
+ All position arguments not in this form are invalid.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests("ellipse", false, "px"));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html
new file mode 100644
index 0000000000..9456bec3d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse - Position Length Units</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths">
+ <meta name="assert" content="An ellipse's position arguments may in any valid <length> unit allowed by a <position> value.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ setup({explicit_done: true});
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + inline', ParsingUtils.validUnits) );
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + computed', ParsingUtils.validUnits) );
+ ParsingUtils.restoreFonts();
+ done();
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html
new file mode 100644
index 0000000000..5c90827d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Valid Radii - length units</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An ellipse's radii may be in any valid length unit.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ setup({explicit_done: true});
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + inline', ParsingUtils.validUnits));
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ generate_tests(ParsingUtils.testComputedStyle,
+ ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + computed', ParsingUtils.validUnits));
+ ParsingUtils.restoreFonts();
+ done();
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html
new file mode 100644
index 0000000000..69cd8aca78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Radii - positive/negative, decimal/non-decimal</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An ellipse's radii may be in signed positive or decimal/non-decimal format. Negative
+ radii are invalid.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_ellipse_radii_tests = [
+ {
+ "actual": "ellipse(+10px +20px)",
+ "expected_inline": "ellipse(10px 20px)",
+ "expected_computed": "ellipse(10px 20px)"
+ },
+ {
+ "actual": "ellipse(+30px 40px)",
+ "expected_inline": "ellipse(30px 40px)",
+ "expected_computed": "ellipse(30px 40px)"
+ },
+ {
+ "actual": "ellipse(50px +60px)",
+ "expected_inline": "ellipse(50px 60px)",
+ "expected_computed": "ellipse(50px 60px)"
+ },
+ {
+ "actual": "ellipse(+10.00px +20.230px)",
+ "expected_inline": "ellipse(10px 20.23px)",
+ "expected_computed": "ellipse(10px 20.23px)"
+ },
+ {
+ "actual": "ellipse(+30.00px 40.567px)",
+ "expected_inline": "ellipse(30px 40.567px)",
+ "expected_computed": "ellipse(30px 40.567px)"
+ },
+ {
+ "actual": "ellipse(50.10px +60.7px)",
+ "expected_inline": "ellipse(50.1px 60.7px)",
+ "expected_computed": "ellipse(50.1px 60.7px)"
+ },
+ {
+ "actual": "ellipse(+10% +20%)",
+ "expected_inline": "ellipse(10% 20%)",
+ "expected_computed": "ellipse(10% 20%)"
+ },
+ {
+ "actual": "ellipse(+30% 40%)",
+ "expected_inline": "ellipse(30% 40%)",
+ "expected_computed": "ellipse(30% 40%)"
+ },
+ {
+ "actual": "ellipse(+50% +60%)",
+ "expected_inline": "ellipse(50% 60%)",
+ "expected_computed": "ellipse(50% 60%)"
+ },
+ {
+ "actual": "ellipse(+10.00% +20.230%)",
+ "expected_inline": "ellipse(10% 20.23%)",
+ "expected_computed": "ellipse(10% 20.23%)"
+ },
+ {
+ "actual": "ellipse(+30.00% 40.567%)",
+ "expected_inline": "ellipse(30% 40.567%)",
+ "expected_computed": "ellipse(30% 40.567%)"
+ },
+ {
+ "actual": "ellipse(50.10% +60.7%)",
+ "expected_inline": "ellipse(50.1% 60.7%)",
+ "expected_computed": "ellipse(50.1% 60.7%)"
+ },
+ {
+ "actual": "ellipse(+10px +20px at 50% 50%)",
+ "expected_inline": "ellipse(10px 20px at 50% 50%)",
+ "expected_computed": "ellipse(10px 20px at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+30px 40px at 50% 50%)",
+ "expected_inline": "ellipse(30px 40px at 50% 50%)",
+ "expected_computed": "ellipse(30px 40px at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(50px +60px at 50% 50%)",
+ "expected_inline": "ellipse(50px 60px at 50% 50%)",
+ "expected_computed": "ellipse(50px 60px at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+10.00px +20.230px at 50% 50%)",
+ "expected_inline": "ellipse(10px 20.23px at 50% 50%)",
+ "expected_computed": "ellipse(10px 20.23px at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+30.00px 40.567px at 50% 50%)",
+ "expected_inline": "ellipse(30px 40.567px at 50% 50%)",
+ "expected_computed": "ellipse(30px 40.567px at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(50.10px +60.7px at 50% 50%)",
+ "expected_inline": "ellipse(50.1px 60.7px at 50% 50%)",
+ "expected_computed": "ellipse(50.1px 60.7px at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+10% +20% at 50% 50%)",
+ "expected_inline": "ellipse(10% 20% at 50% 50%)",
+ "expected_computed": "ellipse(10% 20% at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+30% 40% at 50% 50%)",
+ "expected_inline": "ellipse(30% 40% at 50% 50%)",
+ "expected_computed": "ellipse(30% 40% at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+50% +60% at 50% 50%)",
+ "expected_inline": "ellipse(50% 60% at 50% 50%)",
+ "expected_computed": "ellipse(50% 60% at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+10.00% +20.230% at 50% 50%)",
+ "expected_inline": "ellipse(10% 20.23% at 50% 50%)",
+ "expected_computed": "ellipse(10% 20.23% at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(+30.00% 40.567% at 50% 50%)",
+ "expected_inline": "ellipse(30% 40.567% at 50% 50%)",
+ "expected_computed": "ellipse(30% 40.567% at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(50.10% +60.7% at 50% 50%)",
+ "expected_inline": "ellipse(50.1% 60.7% at 50% 50%)",
+ "expected_computed": "ellipse(50.1% 60.7% at 50% 50%)"
+ }
+ ];
+ invalid_ellipse_radii_tests = [
+ {"name": "ellipse(-10px -20px)"},
+ {"name": "ellipse(-30px 40px)"},
+ {"name": "ellipse(50px -60px)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "computed") );
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_ellipse_radii_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html
new file mode 100644
index 0000000000..e18e32e7c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Radii - invalid args</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="This test verifies that invalid shape-radius arguments on ellipse() don't parse.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var invalid_ellipse_radiii_tests = [
+ {"name": "ellipse(foo)"},
+ {"name": "ellipse(10)"},
+ {"name": "ellipse(20px 30px 40px)"},
+ {"name": "ellipse(20% 30% 40%)"},
+ {"name": "ellipse(20px, 30px, 40px)"},
+ {"name": "ellipse(20%, 30%, 40%)"},
+ {"name": "ellipse(20px 30px closest-side)"},
+ {"name": "ellipse(20px 30px farthest-side)"},
+ {"name": "ellipse(closest-side 20px 30px)"},
+ {"name": "ellipse(farthest-side 20px 30px)"},
+ {"name": "ellipse(20% 30% closest-side)"},
+ {"name": "ellipse(20% 30% farthest-side)"},
+ {"name": "ellipse(closest-side 20% 30%)"},
+ {"name": "ellipse(farthest-side 20% 30%)"},
+ {"name": "ellipse(closest-side farthest-side 20px)"},
+ {"name": "ellipse(closest-side farthest-side 20%)"},
+ {"name": "ellipse(farthest-side closest-side closest-side)"},
+ {"name": "ellipse(farthest-side, closest-side, closest-side)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_ellipse_radiii_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html
new file mode 100644
index 0000000000..35f454bd21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Invalid Position Argument Values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="This test verifies that invalid position arguments on ellipse() don't parse">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var invalid_ellipse_position_tests = [
+ {"name": "ellipse(at foo)"},
+ {"name": "ellipse(at 50)"},
+ {"name": "ellipse(at 10px 20px 30px)"},
+ {"name": "ellipse(at 20% 30% 40%)"},
+ {"name": "ellipse(at 20px, 30px)"},
+ {"name": "ellipse(at 20%, 30%)"},
+ {"name": "ellipse(at 20px, 30px, 40px)"},
+ {"name": "ellipse(at 20%, 30%, 40%)"},
+ {"name": "ellipse(at closest-side)"},
+ {"name": "ellipse(at farthest-side)"},
+ {"name": "ellipse(at 20px 30px closest-side)"},
+ {"name": "ellipse(at 20px 30px farthest-side)"},
+ {"name": "ellipse(at 20px 30px foo)"},
+ {"name": "ellipse(at closest-side 20px 30px)"},
+ {"name": "ellipse(at farthest-side 20px 30px)"},
+ {"name": "ellipse(at 20% 30% closest-side)"},
+ {"name": "ellipse(at 20% 30% farthest-side)"},
+ {"name": "ellipse(at closest-side 20% 30%)"},
+ {"name": "ellipse(at farthest-side 20% 30%)"},
+ {"name": "ellipse(at closest-side farthest-side 20px)"},
+ {"name": "ellipse(at closest-side farthest-side 20%)"},
+ {"name": "ellipse(at farthest-side closest-side closest-side)"},
+ {"name": "ellipse(at farthest-side, closest-side, closest-side)"},
+ {"name": "ellipse(at left 50x top 50px bottom)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_ellipse_position_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html
new file mode 100644
index 0000000000..36db61825b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse Position Arguments - positive/negative, decimal/non-decimal</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An ellipse's position arguments may be in signed positive/negative or
+ decimal/non-decimal format.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_ellipse_radii_tests = [
+ {
+ "actual": "ellipse(at +50px)",
+ "expected_inline": "ellipse(at 50px 50%)",
+ "expected_computed": "ellipse(at 50px 50%)"
+ },
+ {
+ "actual": "ellipse(at -50px)",
+ "expected_inline": "ellipse(at -50px 50%)",
+ "expected_computed": "ellipse(at -50px 50%)"
+ },
+ {
+ "actual": "ellipse(at +50%)",
+ "expected_inline": "ellipse(at 50% 50%)",
+ "expected_computed": "ellipse(at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(at -50%)",
+ "expected_inline": "ellipse(at -50% 50%)",
+ "expected_computed": "ellipse(at -50% 50%)"
+ },
+ {
+ "actual": "ellipse(at left +50px)",
+ "expected_inline": "ellipse(at 0% 50px)",
+ "expected_computed": "ellipse(at 0% 50px)"
+ },
+ {
+ "actual": "ellipse(at left +50%)",
+ "expected_inline": "ellipse(at 0% 50%)",
+ "expected_computed": "ellipse(at 0% 50%)"
+ },
+ {
+ "actual": "ellipse(at right -50px)",
+ "expected_inline": "ellipse(at 100% -50px)",
+ "expected_computed": "ellipse(at 100% -50px)"
+ },
+ {
+ "actual": "ellipse(at right -50%)",
+ "expected_inline": "ellipse(at 100% -50%)",
+ "expected_computed": "ellipse(at 100% -50%)"
+ },
+ {
+ "actual": "ellipse(at +50px top)",
+ "expected_inline": "ellipse(at 50px 0%)",
+ "expected_computed": "ellipse(at 50px 0%)"
+ },
+ {
+ "actual": "ellipse(at +50% top)",
+ "expected_inline": "ellipse(at 50% 0%)",
+ "expected_computed": "ellipse(at 50% 0%)"
+ },
+ {
+ "actual": "ellipse(at -50px bottom)",
+ "expected_inline": "ellipse(at -50px 100%)",
+ "expected_computed": "ellipse(at -50px 100%)"
+ },
+ {
+ "actual": "ellipse(at -50% bottom)",
+ "expected_inline": "ellipse(at -50% 100%)",
+ "expected_computed": "ellipse(at -50% 100%)"
+ },
+ {
+ "actual": "ellipse(at +50px +50px)",
+ "expected_inline": "ellipse(at 50px 50px)",
+ "expected_computed": "ellipse(at 50px 50px)"
+ },
+ {
+ "actual": "ellipse(at +50% +50%)",
+ "expected_inline": "ellipse(at 50% 50%)",
+ "expected_computed": "ellipse(at 50% 50%)"
+ },
+ {
+ "actual": "ellipse(at -50px -50px)",
+ "expected_inline": "ellipse(at -50px -50px)",
+ "expected_computed": "ellipse(at -50px -50px)"
+ },
+ {
+ "actual": "ellipse(at +50px -50px)",
+ "expected_inline": "ellipse(at 50px -50px)",
+ "expected_computed": "ellipse(at 50px -50px)"
+ },
+ {
+ "actual": "ellipse(at -50px +50px)",
+ "expected_inline": "ellipse(at -50px 50px)",
+ "expected_computed": "ellipse(at -50px 50px)"
+ },
+ {
+ "actual": "ellipse(at +50% -50%)",
+ "expected_inline": "ellipse(at 50% -50%)",
+ "expected_computed": "ellipse(at 50% -50%)"
+ },
+ {
+ "actual": "ellipse(at -50% +50%)",
+ "expected_inline": "ellipse(at -50% 50%)",
+ "expected_computed": "ellipse(at -50% 50%)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html
new file mode 100644
index 0000000000..430d2621ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse args - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+ <meta name="assert" content="An ellipse's arguments may be in calc() values.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var ellipse_calc_tests = [];
+ var defaultPosition = ' at 50% 50%';
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['ellipse(farthest-side '+ value[0] + defaultPosition + ')',
+ 'ellipse(farthest-side '+ value[1] + defaultPosition +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'ellipse(farthest-side '+ value[2][0] + defaultPosition +')',
+ 'ellipse(farthest-side '+ value[2][1] + defaultPosition +')'
+ ]);
+ } else {
+ testCase.push('ellipse(farthest-side '+ value[2] + defaultPosition +')');
+ }
+ ellipse_calc_tests.push(testCase);
+ });
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['ellipse('+ value[0] +' '+ value[0] + defaultPosition + ')',
+ 'ellipse('+ value[1] +' '+ value[1] + defaultPosition +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'ellipse('+ value[2][0] +' '+ value[2][0] + defaultPosition +')',
+ 'ellipse('+ value[2][1] +' '+ value[2][1] + defaultPosition +')'
+ ]);
+ } else {
+ testCase.push('ellipse('+ value[2] +' '+ value[2] + defaultPosition +')');
+ }
+
+ ellipse_calc_tests.push(testCase);
+ });
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(ellipse_calc_tests, 'value'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(ellipse_calc_tests, 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html
new file mode 100644
index 0000000000..acbbf2474f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Ellipse position args - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+ <meta name="assert" content="An ellipse's <position> arguments may be in calc() values.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var ellipse_position_calc_tests = [];
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['ellipse(at '+ value[0] +' 50%)',
+ 'ellipse(at '+ value[1] +' 50%)'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'ellipse(at '+ value[2][0] +' 50%)',
+ 'ellipse(at '+ value[2][1] +' 50%)'
+ ]);
+ } else {
+ testCase.push('ellipse(at '+ value[2] +' 50%)');
+ }
+ ellipse_position_calc_tests.push(testCase);
+ });
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['ellipse(closest-side farthest-side at '+ value[0] +' '+ value[0] +')',
+ 'ellipse(closest-side farthest-side at '+ value[1] +' '+ value[1] +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'ellipse(closest-side farthest-side at '+ value[2][0] +' '+ value[2][0] +')',
+ 'ellipse(closest-side farthest-side at '+ value[2][1] +' '+ value[2][1] +')'
+ ]);
+ } else {
+ testCase.push('ellipse(closest-side farthest-side at '+ value[2] +' '+ value[2] +')');
+ }
+ ellipse_position_calc_tests.push(testCase);
+ });
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(ellipse_position_calc_tests, 'inline'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(ellipse_position_calc_tests, 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html
new file mode 100644
index 0000000000..bb6d8ea278
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset Valid Formats</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An inset has 1 to 4 insets, and optional border radii that follow the border-radius format">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_inset_tests = [
+ {
+ "name": "1 inset",
+ "actual": "inset(10px)",
+ "expected_inline": "inset(10px)",
+ "expected_computed": "inset(10px)"
+ },
+ {
+ "name": "2 insets",
+ "actual": "inset(10px 20px)",
+ "expected_inline": "inset(10px 20px)",
+ "expected_computed": "inset(10px 20px)"
+ },
+ {
+ "name": "3 insets",
+ "actual": "inset(10px 20px 30px)",
+ "expected_inline": "inset(10px 20px 30px)",
+ "expected_computed": "inset(10px 20px 30px)"
+ },
+ {
+ "name": "4 insets",
+ "actual": "inset(10px 20px 30px 40px)",
+ "expected_inline": "inset(10px 20px 30px 40px)",
+ "expected_computed": "inset(10px 20px 30px 40px)"
+ },
+ {
+ "name": "1 inset and round",
+ "actual": "inset(10px round 20px)",
+ "expected_inline": "inset(10px round 20px)",
+ "expected_computed": "inset(10px round 20px)"
+ },
+ {
+ "name": "2 insets and round",
+ "actual": "inset(10px 20px round 30px)",
+ "expected_inline": "inset(10px 20px round 30px)",
+ "expected_computed": "inset(10px 20px round 30px)"
+ },
+ {
+ "name": "3 insets and round",
+ "actual": "inset(10px 20px 30px round 40px)",
+ "expected_inline": "inset(10px 20px 30px round 40px)",
+ "expected_computed": "inset(10px 20px 30px round 40px)"
+ },
+ {
+ "name": "4 insets and round",
+ "actual": "inset(10px 20px 30px 40px round 50px)",
+ "expected_inline": "inset(10px 20px 30px 40px round 50px)",
+ "expected_computed": "inset(10px 20px 30px 40px round 50px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_inset_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_inset_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html
new file mode 100644
index 0000000000..c3b274d974
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset Valid Insets</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An inset has 1 to 4 insets as percentages or length in any unit">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildInsetTests(ParsingUtils.validUnits, "%", "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildInsetTests(ParsingUtils.validUnits, "%", "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html
new file mode 100644
index 0000000000..b82abea82a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="This checks that a float 'shadowing' a shape-outside float works as expected.">
+<style>
+#container { width: 100px; line-height: 0; }
+#float_1 { float: right; width: 30px; height: 30px; background: green; }
+#float_2 { float: left; width: 20px; height: 100px; background: green; shape-outside: inset(0 20px 0 0); }
+#float_3 { float: left; width: 30px; height: 50px; background: green; }
+.atomic { display: inline-block; background: green; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id="container">
+ <div id="float_1"></div>
+ <div id="float_2"></div>
+ <div id="float_3"></div>
+ <div class="atomic" style="width: 20px; height: 30px;"></div>
+ <div class="atomic" style="width: 50px; height: 20px;"></div>
+ <div class="atomic" style="width: 80px; height: 50px;"></div><div class="atomic" style="width: 20px; height: 50px;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html
new file mode 100644
index 0000000000..295db30617
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset Valid Rounds</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="An inset's radial component has 1 to 4 length/percentages, optionally followed by a '/'
+ and an additional 1 to 4 length/percentages and lengths can be in any unit.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.generateInsetRoundCases('px', 'inline'));
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.generateInsetRoundCases('%', 'inline'));
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.generateInsetRoundCases('px', 'computed'));
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.generateInsetRoundCases('%', 'computed'));
+
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html
new file mode 100644
index 0000000000..abb9972d05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset Valid Round Length Units</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths">
+ <meta name="assert" content="An inset's radial component's values can be in any length unit">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ setup({explicit_done: true});
+ ParsingUtils.validUnits.forEach(function(unit) {
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.generateInsetRoundCases(unit, 'inline'));
+ });
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ ParsingUtils.validUnits.forEach(function(unit) {
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.generateInsetRoundCases(unit, 'computed'));
+ });
+ ParsingUtils.restoreFonts();
+ done();
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html
new file mode 100644
index 0000000000..08c83c55fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset - positive/negative, decimal/non-decimal args</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="These tests verify that shape-outside inset() arguments can be numbers that are signed in
+ positive and negative and/or decimal/non-decimal form.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_inset_args_tests = [
+ {
+ "actual": "inset(+10px -20px +30px -40px)",
+ "expected_inline": "inset(10px -20px 30px -40px)",
+ "expected_computed": "inset(10px -20px 30px -40px)"
+ },
+ {
+ "actual": "inset(-10px +20px -30px +40px)",
+ "expected_inline": "inset(-10px 20px -30px 40px)",
+ "expected_computed": "inset(-10px 20px -30px 40px)"
+ },
+ {
+ "actual": "inset(10.1200px 20.34px 30.56px 40.780px)",
+ "expected_inline": "inset(10.12px 20.34px 30.56px 40.78px)",
+ "expected_computed": "inset(10.12px 20.34px 30.56px 40.78px)"
+ },
+ {
+ "actual": "inset(10.123px 20.00px 30.10px 40.5678px)",
+ "expected_inline": "inset(10.123px 20px 30.1px 40.5678px)",
+ "expected_computed": "inset(10.123px 20px 30.1px 40.5678px)"
+ },
+ {
+ "actual": "inset(+10.1200px -20.340px +30.56px -40.780px)",
+ "expected_inline": "inset(10.12px -20.34px 30.56px -40.78px)",
+ "expected_computed": "inset(10.12px -20.34px 30.56px -40.78px)"
+ },
+ {
+ "actual": "inset(-10.123px +20.00px -30.10px +40.5678px)",
+ "expected_inline": "inset(-10.123px 20px -30.1px 40.5678px)",
+ "expected_computed": "inset(-10.123px 20px -30.1px 40.5678px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_inset_args_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_inset_args_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html
new file mode 100644
index 0000000000..ac38b0d9d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset - Invalid args</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="These tests verifies that invalid inset() arguments don't parse.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var invalid_inset_args_tests = [
+ // no units
+ {"name": "inset(10 20px 30px 40px)"},
+ {"name": "inset(10px 20 30px 40px)"},
+ {"name": "inset(10px, 20px 30 40px)"},
+ {"name": "inset(10px 20px 30px 40)"},
+ {"name": "inset(10 20 30 40)"},
+ // comma delimited args
+ {"name": "inset(10px, 20px, 30px, 40px)"},
+ {"name": "inset(10px, 20px, 30px 40px)"},
+ {"name": "inset(10px, 20px 30px 40px)"},
+ {"name": "inset(10px 20px, 30px, 40px)"},
+ {"name": "inset(10px 20px 30px, 40px)"},
+ // bogus args
+ {"name": "inset(foo bar blah woo)"},
+ {"name": "inset(10px roo 30px coo)"},
+ {"name": "inset(may 20px blah 40px)"}
+ ];
+ generate_tests(ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_inset_args_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html
new file mode 100644
index 0000000000..3a8f8aaf21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset Radial Args - positive/negative, decimal/non-decimal</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="These tests verify that shape-outside inset() radial component can be numbers that are in
+ signed positive and/or decimal/non-decimal form. Negative values are not allowed">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_inset_radial_args_tests = [
+ {
+ "actual": "inset(10px round +10px +20px +30px +40px)",
+ "expected_inline": "inset(10px round 10px 20px 30px 40px)",
+ "expected_computed": "inset(10px round 10px 20px 30px 40px)"
+ },
+ {
+ "actual": "inset(10px round 10.1200px 20.34px 30.56px 40.780px)",
+ "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)",
+ "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)"
+ },
+ {
+ "actual": "inset(10px round 10.123px 20.00px 30.10px 40.5678px)",
+ "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)",
+ "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)"
+ },
+ {
+ "actual": "inset(10px round +10.1200px +20.340px +30.56px +40.780px)",
+ "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)",
+ "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)"
+ },
+ {
+ "actual": "inset(10px round +10px +20px +30px +40px / +10px +20px +30px +40px )",
+ "expected_inline": "inset(10px round 10px 20px 30px 40px)",
+ "expected_computed": "inset(10px round 10px 20px 30px 40px)"
+ },
+ {
+ "actual": "inset(10px round 10.1200px 20.34px 30.56px 40.780px / 10.1200px 20.34px 30.56px 40.780px)",
+ "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)",
+ "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)"
+ },
+ {
+ "actual": "inset(10px round 10.123px 20.00px 30.10px 40.5678px / 10.123px 20.00px 30.10px 40.5678px)",
+ "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)",
+ "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)"
+ },
+ {
+ "actual": "inset(10px round +10.1200px +20.340px +30.56px +40.780px / +10.1200px +20.340px +30.56px +40.780px)",
+ "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)",
+ "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)"
+ },
+ {
+ "actual": "inset(10px round +10.123px +20.00px +30.10px +40.5678px / 10.123px +20.00px +30.10px +40.5678px)",
+ "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)",
+ "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)"
+ }
+ ];
+ invalid_radial_args_tests = [
+ {"name": "inset(10px round -10px -20px -30px -40px)"},
+ {"name": "inset(10px round -10.1200px -20.340px -30.56px -40.780px)"},
+ {"name": "inset(10px round -10px -20px -30px -40px / -10px -20px -30px -40px)"},
+ {"name": "inset(10px round -10.123px -20.00px -30.10px -40.5678px / 10.123px -20.00px -30.10px -40.5678px)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_inset_radial_args_tests, 'inline') );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_inset_radial_args_tests, 'computed') );
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_radial_args_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html
new file mode 100644
index 0000000000..83655bf001
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset Radial Args - Invalid</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="These tests verify invalid radial component arguments don't parse.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var invalid_radial_args_tests = [
+ // no units
+ {"name": "inset(10px round 10 20 30 40)"},
+ {"name": "inset(10px round 10px 20 30 40)"},
+ {"name": "inset(10px round 10px 20px 30 40)"},
+ {"name": "inset(10px round 10px 20px 30px 40)"},
+ {"name": "inset(10px round 10px 20px 30px 40px / 10 20 30 40)"},
+ {"name": "inset(10px round 10px 20px 30px 40px / 10px 20 30 40)"},
+ {"name": "inset(10px round 10px 20px 30px 40px / 10px 20px 30 40)"},
+ {"name": "inset(10px round 10px 20px 30px 40px / 10px 20px 30px 40)"},
+ // commas
+ {"name": "inset(10px round 10px, 20px, 30px, 40px)"},
+ {"name": "inset(10px round 10px, 20px, 30px 40px)"},
+ {"name": "inset(10px round 10px, 20px 30px 40px)"},
+ {"name": "inset(10px round 10px 20px, 30px, 40px)"},
+ {"name": "inset(10px round 10px 20px 30px, 40px)"},
+ {"name": "inset(10px round 10px, 20px, 30px, 40px / 10px, 20px, 30px, 40px)"},
+ {"name": "inset(10px round 10px 20px, 30px, 40px / 10px 20px, 30px, 40)"},
+ {"name": "inset(10px round 10px 20px 30px, 40px / 10px 20px 30px, 40)"},
+ // bogus args
+ {"name": "inset(10px round foo, bar, boo, $$)"},
+ {"name": "inset(10px round 10px, xx, px pt)"},
+ {"name": "inset(10px round word)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_radial_args_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html
new file mode 100644
index 0000000000..c53949d1e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset Args - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+ <meta name="assert" content="An inset's arguments may be in calc() values.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var inset_calc_tests = [];
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['inset('+ value[0] +')',
+ 'inset('+ value[1] +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([ 'inset('+ value[2][0] +')', 'inset('+ value[2][1] +')' ]);
+ } else {
+ testCase.push('inset('+ value[2] +')');
+ }
+ inset_calc_tests.push(testCase);
+ });
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['inset('+ value[0] +' '+ value[0] +')',
+ 'inset('+ value[1] +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([ 'inset('+ value[2][0] +')', 'inset('+ value[2][1] +')' ]);
+ } else {
+ testCase.push('inset('+ value[2] +')');
+ }
+ inset_calc_tests.push(testCase);
+ });
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(inset_calc_tests, 'value'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(inset_calc_tests, 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html
new file mode 100644
index 0000000000..a826a8700e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Inset round args - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+ <meta name="assert" content="An inset's radial component arguments may be in calc() values.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var fullInset = '10px 10px 10px 10px';
+ var serializedInset = "10px";
+
+ var inset_round_calc_tests = [];
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['inset('+ fullInset +' round '+ value[0] +')',
+ 'inset('+ serializedInset +' round '+ value[1] +')'];
+ // array check
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'inset('+ serializedInset +' round '+ value[2][0] +')',
+ 'inset('+ serializedInset +' round '+ value[2][1] +')'
+ ]);
+ } else {
+ testCase.push('inset('+ serializedInset +' round '+ value[2] +')');
+ }
+ inset_round_calc_tests.push(testCase);
+ });
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['inset('+ fullInset +' round '+ value[0] +' '+ value[0] +')',
+ 'inset('+ serializedInset +' round '+ value[1] +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'inset('+ serializedInset +' round '+ value[2][0] +')',
+ 'inset('+ serializedInset +' round '+ value[2][1] +')'
+ ]);
+ } else {
+ testCase.push('inset('+ serializedInset +' round '+ value[2] +')');
+ }
+ inset_round_calc_tests.push(testCase);
+ });
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(inset_round_calc_tests, 'inline'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(inset_round_calc_tests, 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html
new file mode 100644
index 0000000000..d4e9ca30fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Polygon Valid Formats</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A polygonal basic shape has an optional fill-rule and one or more pairs of coordinates">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_polygon_tests = [
+ {
+ "name": "Single point",
+ "actual": "polygon(1px 2px)",
+ "expected_inline": "polygon(1px 2px)",
+ "expected_computed": "polygon(1px 2px)"
+ },
+ {
+ "name": "Single point with fill-rule",
+ "actual": "polygon(evenodd, 1px 2px)",
+ "expected_inline": "polygon(evenodd, 1px 2px)",
+ "expected_computed": "polygon(evenodd, 1px 2px)"
+ },
+ {
+ "name": "Multiple points",
+ "actual": "polygon(1px 2px, 3px 4px, 5px 6px)",
+ "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)",
+ "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)"
+ },
+ {
+ "name": "Multiple points with fill-rule",
+ "actual": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)",
+ "expected_inline": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)",
+ "expected_computed": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_polygon_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_polygon_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html
new file mode 100644
index 0000000000..242d56187a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Polygon Valid Fill-Rules</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A polygonal basic shape's optional fill-rule may be either 'nonzero' or 'evenodd'">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_fill_rule_tests = [
+ {
+ "name": "Nonzero",
+ "actual": "polygon(nonzero, 1px 2px)",
+ "expected_inline": "polygon(1px 2px)",
+ "expected_computed": "polygon(1px 2px)"
+ },
+ {
+ "name": "Evenodd",
+ "actual": "polygon(evenodd, 1px 2px)",
+ "expected_inline": "polygon(evenodd, 1px 2px)",
+ "expected_computed": "polygon(evenodd, 1px 2px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_fill_rule_tests, 'inline') );
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_fill_rule_tests, 'computed') );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html
new file mode 100644
index 0000000000..cb78c28a56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Polygon Valid Points</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A polygonal basic shape's points may be either lengths or percentages">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_polygon_points_tests = [
+ {
+ "name": "Lengths",
+ "actual": "polygon(1px 2px, 3px 4px, 5px 6px)",
+ "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)",
+ "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)"
+ },
+ {
+ "name": "Percentages",
+ "actual": "polygon(1% 2%, 3% 4%, 5% 6%)",
+ "expected_inline": "polygon(1% 2%, 3% 4%, 5% 6%)",
+ "expected_computed": "polygon(1% 2%, 3% 4%, 5% 6%)"
+ },
+ {
+ "name": "Mixed Lengths and Percentages",
+ "actual": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)",
+ "expected_inline": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)",
+ "expected_computed": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_polygon_points_tests, 'inline') );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_polygon_points_tests, 'computed') );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html
new file mode 100644
index 0000000000..a9344bda0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Polygon Invalid Points</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A polygonal basic shape's points may be either lengths or percentages">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var invalid_polygon_points_tests = [
+ {"name": "polygon()"},
+ {"name": "polygon(evenodd)"},
+ {"name": "polygon(nonzero)"},
+ {"name": "polygon(evenodd, foo bar)"},
+ {"name": "polygon(nonzero, bar foo)"},
+ {"name": "polygon(foo, 1px 2px)"},
+ {"name": "polygon(evenodd 1px 2px)"},
+ {"name": "polygon(nonzero 1px 2px)"},
+ {"name": "polygon(1px)"},
+ {"name": "polygon(1px 2px 3px)"},
+ {"name": "polygon(1px 2px 3px 4px)"},
+ {"name": "polygon(1px, 2px)"},
+ {"name": "polygon(1px 2px evenodd)"},
+ {"name": "polygon(1px 2px nonzero)"},
+ {"name": "polygon(evenodd, 10 20)"},
+ {"name": "polygon(nonzero, 10 20)"}
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(invalid_polygon_points_tests) );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html
new file mode 100644
index 0000000000..5edde7dfad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Polygon - Argument Length Units</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths">
+ <meta name="assert" content="A polygon's veritices may in percentage or any valid <length> units.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ setup({explicit_done: true});
+ var arg_length_units_tests = [
+ ['%', 'px', 'px'],
+ ['px', '%', 'px'],
+ ['px', 'px', '%'],
+ ['%', '%', '%'],
+ ['em', 'em', 'ex'],
+ ['vw', 'vh', '%'],
+ ['cm', 'mm', 'pc'],
+ ['vmin', 'vmin', 'vmax'],
+ ['rem', 'ch', 'rem'],
+ ['in', 'pt', '%']
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildPolygonTests(arg_length_units_tests, 'inline') );
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildPolygonTests(arg_length_units_tests, 'computed') );
+ ParsingUtils.restoreFonts();
+ done();
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html
new file mode 100644
index 0000000000..cde27d5d32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Polygon Valid Points</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="A polygon's vertices can be in signed positive/negative or decimal/non-decimal format">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var valid_polygon_points_tests = [
+ {
+ "actual": "polygon(+1px +2px, +3px +4px, +5px +6px)",
+ "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)",
+ "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)"
+ },
+ {
+ "actual": "polygon(-1px -2px, -3px -4px, -5px -6px)",
+ "expected_inline": "polygon(-1px -2px, -3px -4px, -5px -6px)",
+ "expected_computed": "polygon(-1px -2px, -3px -4px, -5px -6px)"
+ },
+ {
+ "actual": "polygon(+1px +2px, -3px -4px, +5px +6px)",
+ "expected_inline": "polygon(1px 2px, -3px -4px, 5px 6px)",
+ "expected_computed": "polygon(1px 2px, -3px -4px, 5px 6px)"
+ },
+ {
+ "actual": "polygon(-1px -2px, +3px +4px, -5px -6px)",
+ "expected_inline": "polygon(-1px -2px, 3px 4px, -5px -6px)",
+ "expected_computed": "polygon(-1px -2px, 3px 4px, -5px -6px)"
+ },
+ {
+ "actual": "polygon(1.0px 2.22px, 3.40px 4.555px, 5.607px 6.99px)",
+ "expected_inline": "polygon(1px 2.22px, 3.4px 4.555px, 5.607px 6.99px)",
+ "expected_computed": "polygon(1px 2.22px, 3.4px 4.555px, 5.607px 6.99px)"
+ },
+ {
+ "actual": "polygon(+1.0px -2.22px, +3.40px -4.550px, 5.67px -6.99px)",
+ "expected_inline": "polygon(1px -2.22px, 3.4px -4.55px, 5.67px -6.99px)",
+ "expected_computed": "polygon(1px -2.22px, 3.4px -4.55px, 5.67px -6.99px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(valid_polygon_points_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(valid_polygon_points_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html
new file mode 100644
index 0000000000..9912f39bb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Polygon args - calc() values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+ <meta name="assert" content="A polygon's arguments may be in calc() values.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var polygon_calc_tests = [];
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['polygon('+ value[0] +' '+ value[0] +')',
+ 'polygon('+ value[1] +' '+ value[1] +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'polygon('+ value[2][0] +' '+ value[2][0] +')',
+ 'polygon('+ value[2][1] +' '+ value[2][1] +')'
+ ]);
+ } else {
+ testCase.push('polygon('+ value[2] +' '+ value[2] +')');
+ }
+ polygon_calc_tests.push(testCase);
+ });
+ ParsingUtils.calcTestValues.forEach(function(value) {
+ testCase = ['polygon(evenodd, '+ value[0] +' '+ value[0] +', '+ value[0] +' '+ value[0] +')',
+ 'polygon(evenodd, '+ value[1] +' '+ value[1] +', '+ value[1] +' '+ value[1] +')'];
+ if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) {
+ testCase.push([
+ 'polygon(evenodd, '+ value[2][0] +' '+ value[2][0] +', '+ value[2][0] +' '+ value[2][0] +')',
+ 'polygon(evenodd, '+ value[2][1] +' '+ value[2][1] +', '+ value[2][1] +' '+ value[2][1] +')'
+ ]);
+ } else {
+ testCase.push('polygon(evenodd, '+ value[2] +' '+ value[2] +', '+ value[2] +' '+ value[2] +')');
+ }
+ polygon_calc_tests.push(testCase);
+ });
+ generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(polygon_calc_tests, 'inline'));
+ generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(polygon_calc_tests, 'computed'));
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html
new file mode 100644
index 0000000000..2c2c959c8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Basic Shape Arguments</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values">
+ <meta name="assert" content="A basic basic shape can contain any length unit type, or percentage">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ // relative units: em, ex, ch, rem, vw, vh, vmin, vmax
+ // fixed units: cm, mm, in, px, pt, pc
+ // percentage unit: %
+ // zero length: 0
+ setup({explicit_done: true});
+ var basic_shape_args_tests = [
+ {
+ "name": "0-valued",
+ "actual": "polygon(nonzero, 0 0)",
+ "expected_inline": "polygon(0px 0px)",
+ "expected_computed": "polygon(0px 0px)"
+ },
+ {
+ "name": "Font relative units",
+ "actual": "polygon(nonzero, 1em 1ex, 1ch 1rem)",
+ "expected_inline": "polygon(1em 1ex, 1ch 1rem)",
+ "expected_computed": "polygon(1em 1ex, 1ch 1rem)" // converted to px by the framework
+ },
+ {
+ "name": "View relative units",
+ "actual": "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)",
+ "expected_inline": "polygon(1vw 1vh, 1vmin 1vmax)",
+ "expected_computed": "polygon(1vw 1vh, 1vmin 1vmax)" // converted to px by the framework
+ },
+ {
+ "name": "Fixed units",
+ "actual": "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)",
+ "expected_inline": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)",
+ "expected_computed": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)" // converted to px by the framework
+ },
+ {
+ "name": "Percentage units",
+ "actual": "polygon(nonzero, 1% 2%)",
+ "expected_inline": "polygon(1% 2%)",
+ "expected_computed": "polygon(1% 2%)"
+ }
+ ];
+
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(basic_shape_args_tests, "inline") );
+ ParsingUtils.setupFonts();
+ document.fonts.ready.then(()=> {
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") );
+ ParsingUtils.restoreFonts();
+ done();
+ });
+
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html
new file mode 100644
index 0000000000..04fac808c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Shape Number Values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values">
+ <meta name="assert" content="The basic shape can contain all valid number formats">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ // number forms: d, +d, -d, .d, +.d, -.d, d.d, +d.d, -d.d
+ var shape_number_values_tests = [
+ {
+ "name": "Positive number variations",
+ "actual": "polygon(nonzero, 1px +2px, .3px +.4px, 5.5px +6.6px)",
+ "expected_inline": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)",
+ "expected_computed": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)"
+ },
+ {
+ "name": "Negative number variations",
+ "actual": "polygon(nonzero, -1px -.2px, -1.1px 0px)",
+ "expected_inline": "polygon(-1px -0.2px, -1.1px 0px)",
+ "expected_computed": "polygon(-1px -0.2px, -1.1px 0px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(shape_number_values_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(shape_number_values_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html
new file mode 100644
index 0000000000..1b6e9b2398
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Box Shape and Box Valid Values</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-shape-box">
+ <meta name="assert" content="Shape-outside may be a pair of shape and box values">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_box_valid_tests = [
+ {
+ "actual": "polygon(nonzero, 1px 1px) content-box",
+ "expected_inline": "polygon(1px 1px) content-box",
+ "expected_computed": "polygon(1px 1px) content-box"
+ },
+ {
+ "actual": "polygon(nonzero, 1px 1px) padding-box",
+ "expected_inline": "polygon(1px 1px) padding-box",
+ "expected_computed": "polygon(1px 1px) padding-box"
+ },
+ {
+ "actual": "polygon(nonzero, 1px 1px) border-box",
+ "expected_inline": "polygon(1px 1px) border-box",
+ "expected_computed": "polygon(1px 1px) border-box"
+ },
+ {
+ "actual": "polygon(nonzero, 1px 1px) margin-box",
+ "expected_inline": "polygon(1px 1px)",
+ "expected_computed": "polygon(1px 1px)"
+ },
+ {
+ "actual": " content-box polygon(nonzero, 1px 1px)",
+ "expected_inline": "polygon(1px 1px) content-box",
+ "expected_computed": "polygon(1px 1px) content-box"
+ },
+ {
+ "actual": "padding-box polygon(nonzero, 1px 1px)",
+ "expected_inline": "polygon(1px 1px) padding-box",
+ "expected_computed": "polygon(1px 1px) padding-box"
+ },
+ {
+ "actual": "border-box polygon(nonzero, 1px 1px)",
+ "expected_inline": "polygon(1px 1px) border-box",
+ "expected_computed": "polygon(1px 1px) border-box"
+ },
+ {
+ "actual": "margin-box polygon(nonzero, 1px 1px)",
+ "expected_inline": "polygon(1px 1px)",
+ "expected_computed": "polygon(1px 1px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(shape_box_valid_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(shape_box_valid_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html
new file mode 100644
index 0000000000..8929911809
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Box Inherit Value</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="Shape-outside takes can be assigned the 'inherit' value.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ test(function() {
+ var outer = document.createElement("div");
+ var inner = document.createElement("div");
+ outer.appendChild(inner);
+ outer.style.setProperty("shape-outside", "content-box");
+ inner.style.setProperty("shape-outside", "inherit");
+ document.body.appendChild(outer);
+ var inline = inner.style.getPropertyValue("shape-outside");
+ var style = getComputedStyle(inner);
+ var computed = style.getPropertyValue("shape-outside");
+ document.body.removeChild(outer);
+ assert_equals(inline, "inherit");
+ assert_equals(computed, "content-box");
+ }, "shape-outside can be assigned 'inherit' value");
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html
new file mode 100644
index 0000000000..b2ab33542e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Box Initial Value</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="Shape-outside takes its default value of none when assigned the 'initial' value">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ test(function() {
+ ParsingUtils.testInlineStyle("initial", "initial");
+ }, "shape-outside can be assigned 'initial' value");
+ test(function() {
+ ParsingUtils.testComputedStyle("initial", "none");
+ }, "'initial' value computes to the default value");
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html
new file mode 100644
index 0000000000..de14375177
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside - none</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <meta name="assert" content="shape-outside can be explicitly assigned the default value of none.">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ test(function() {
+ ParsingUtils.testInlineStyle("none", "none");
+ }, "shape-outside can be assigned 'none' value");
+ test(function() {
+ ParsingUtils.testComputedStyle("none", "none");
+ }, "'none' value computes to none");
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html
new file mode 100644
index 0000000000..e2a1f251bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html
@@ -0,0 +1,40 @@
+ <!DOCTYPE html>
+<html>
+ <head>
+ <title>Shape Outside Valid Basic Shape Functional Notation</title>
+ <link rel="author" title="Adobe" href="http://html.adobe.com/">
+ <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
+ <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
+ <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
+ <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values">
+ <meta name="assert" content="Basic shapes use functional notation, and may contain optional whitespace inside the parentheses">
+ <meta name="flags" content="ahem dom">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="support/parsing-utils.js"></script>
+ </head>
+ <body>
+ <div id="log"></div>
+ <script type="text/javascript">
+ var shape_functional_notation_tests = [
+ {
+ "name": "No whitespace",
+ "actual": "polygon(nonzero,1px 2px,3px 4px)",
+ "expected_inline": "polygon(1px 2px, 3px 4px)",
+ "expected_computed": "polygon(1px 2px, 3px 4px)"
+ },
+ {
+ "name": "Extra whitespace",
+ "actual": "polygon( nonzero , 1px 2px\n\t,\n\t3px\n\t4px\n\t)",
+ "expected_inline": "polygon(1px 2px, 3px 4px)",
+ "expected_computed": "polygon(1px 2px, 3px 4px)"
+ }
+ ];
+ generate_tests( ParsingUtils.testInlineStyle,
+ ParsingUtils.buildTestCases(shape_functional_notation_tests, "inline") );
+ generate_tests( ParsingUtils.testComputedStyle,
+ ParsingUtils.buildTestCases(shape_functional_notation_tests, "computed") );
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js b/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js
new file mode 100644
index 0000000000..9c13a213e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js
@@ -0,0 +1,892 @@
+var ParsingUtils = (function() {
+function testInlineStyle(value, expected) {
+ var div = document.createElement('div');
+ div.style.setProperty('shape-outside', value);
+ var actual = div.style.getPropertyValue('shape-outside');
+ assert_equals(actual, expected);
+}
+
+function testComputedStyle(value, expected) {
+ var div = document.createElement('div');
+ div.style.setProperty('shape-outside', value);
+ document.body.appendChild(div);
+ var style = getComputedStyle(div);
+ var actual = style.getPropertyValue('shape-outside');
+ actual = roundResultStr(actual);
+ document.body.removeChild(div);
+
+ // Some of the tests in this suite have either/or expected results
+ // so this check allows for testing that at least one of them passes.
+ // Description of the 2 expecteds is below near calcTestValues.
+ if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
+ assert_in_array(actual, expected);
+ } else {
+ assert_equals(actual, typeof expected !== 'undefined' ? expected : value);
+ }
+}
+
+function testShapeMarginInlineStyle(value, expected) {
+ var div = document.createElement('div');
+ div.style.setProperty('shape-outside', "border-box inset(10px)");
+ div.style.setProperty('shape-margin', value);
+ var actual = div.style.getPropertyValue('shape-margin');
+ actual = roundResultStr(actual);
+ expected = roundResultStr(expected);
+ assert_equals(actual, expected);
+}
+
+function testShapeMarginComputedStyle(value, expected) {
+
+ var outerDiv = document.createElement('div');
+ outerDiv.style.setProperty('width', '100px');
+
+ var innerDiv = document.createElement('div');
+ innerDiv.style.setProperty('shape-outside', "border-box inset(10px)");
+ innerDiv.style.setProperty('shape-margin', value);
+
+ outerDiv.appendChild(innerDiv);
+ document.body.appendChild(outerDiv);
+
+ var style = getComputedStyle(innerDiv);
+ var actual = style.getPropertyValue('shape-margin');
+
+ assert_not_equals(actual, null);
+ if(actual.indexOf('calc') == -1 )
+ actual = roundResultStr(actual);
+ document.body.removeChild(outerDiv);
+
+ // See comment above about multiple expected results
+ if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
+ assert_in_array(actual, expected);
+ } else {
+ assert_equals(actual, !expected ? '0px' : expected);
+ }
+}
+
+function testShapeThresholdInlineStyle(value, expected) {
+ var div = document.createElement('div');
+ div.style.setProperty('shape-outside', 'url(someimage.png)');
+ div.style.setProperty('shape-image-threshold', value);
+ var actual = div.style.getPropertyValue('shape-image-threshold');
+ assert_equals(actual, expected);
+}
+
+function testShapeThresholdComputedStyle(value, expected) {
+
+ var div = document.createElement('div');
+ div.style.setProperty('shape-outside', 'url(someimage.png)');
+ div.style.setProperty('shape-image-threshold', value);
+ document.body.appendChild(div);
+
+ var style = getComputedStyle(div);
+ var actual = style.getPropertyValue('shape-image-threshold');
+
+ assert_not_equals(actual, null);
+ if(actual.indexOf('calc') == -1 )
+ actual = roundResultStr(actual);
+ document.body.removeChild(div);
+
+ // See comment above about multiple expected results
+ if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
+ assert_in_array(actual, expected);
+ } else {
+ assert_equals(actual, !expected ? '0' : expected);
+ }
+}
+
+// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected]
+// These test cases will verify results from testInlineStyle() or testComputedStyle()
+function buildTestCases(testCases, testType) {
+ var results = [];
+
+ // If test_type isn't specified, test inline style
+ var type = typeof testType == 'undefined' ? 'invalid': testType;
+
+ testCases.forEach(function(test) {
+ oneTestCase = [];
+
+ // name - annotated by type (inline vs. computed)
+ if ( test.hasOwnProperty('name') ) {
+ oneTestCase.push(test['name'] +' - '+ type);
+ } else {
+ // If test_name isn't specified, use the actual
+ oneTestCase.push(test['actual'] +' - '+ type);
+ }
+
+ // actual
+ oneTestCase.push(test['actual'])
+
+ // expected
+ if( type.indexOf('invalid') != -1 ){
+ oneTestCase.push("")
+ } else if( type == 'inline' ) {
+ oneTestCase.push(test['expected_inline']);
+ } else if( type == 'computed' ){
+ oneTestCase.push( convertToPx(test['expected_computed']) );
+ }
+ results.push(oneTestCase);
+ });
+ return results;
+}
+
+function isAbsoluteLength(unit) {
+ return unit == "cm" || unit == "mm" || unit == "Q" || unit == "in" ||
+ unit == "pt" || unit == "pc" || unit == "px";
+}
+
+function buildPositionTests(shape, valid, type, units) {
+ var results = new Array();
+ var is_computed = type.indexOf('computed') != -1 ? true : false;
+
+ if(Object.prototype.toString.call( units ) === '[object Array]') {
+ units.forEach(function(unit) {
+ positionTests = buildPositionTests(shape, valid, type, unit);
+ results = results.concat(positionTests);
+ });
+ } else {
+ if (valid) {
+ validPositions.forEach(function(test) {
+ var testCase = [], testName, actual, expected;
+ // skip if this isn't explicitly testing length units
+ if (!(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) {
+ // actual
+ actual = shape + '(at ' + setUnit(test[0], false, units) +')';
+
+ let position = test[1];
+ let convert = is_computed;
+ if (!is_computed) {
+ // For specified values.
+ // Note: "[convert]" tag is used only for the specified
+ // value.
+ if (position.includes('[convert]')) {
+ // We should convert the absolute length into the
+ // canonical unit in calc(), for specified values.
+ // e.g.
+ // 1. "circle(at 1pt 50%)" serializes as
+ // "circle(at 1pt 50%)".
+ // 2. "circle(at calc(1pt) 50%)" serializes as
+ // "circle(at calc(1.33px) 50%)".
+ convert = isAbsoluteLength(units);
+ }
+ } else if (test.length == 3) {
+ // Use the 3rd element as the expected computed value.
+ position = test[2];
+ }
+
+ // Remove the tag if there is.
+ position = position.replace('[convert] ', '');
+
+ // expected
+ // if(convert && shape == 'circle')
+ // expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
+ // else if(convert && shape == 'ellipse')
+ // expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
+ // else
+ expected = shape + '(at ' + setUnit(position, convert, units) +')';
+
+ // name
+ if (type == 'lengthUnit + inline')
+ testName = 'test unit (inline): ' + units +' - '+ actual;
+ else if (type == 'lengthUnit + computed')
+ testName = 'test unit (computed): ' + units +' - '+ actual;
+ else
+ testName = (actual + ' serializes as ' + expected +' - '+ type);
+
+ testCase.push(testName)
+ testCase.push(actual);
+ testCase.push(expected);
+ results.push(testCase);
+ }
+ });
+ } else {
+ invalidPositions.forEach(function(test) {
+ var testValue = shape + '(at ' + setUnit(test, false, units) +')';
+ testCase = new Array();
+ testCase.push(testValue + ' is invalid');
+ testCase.push(testValue);
+ testCase.push("");
+ results.push(testCase);
+ });
+ }
+ }
+ return unique(results);
+}
+
+function buildRadiiTests(shape, type, units) {
+ var results = new Array();
+ var testUnits = typeof units == 'undefined' ? 'px': units;
+ var convert = type.indexOf('computed') != -1 ? true : false;
+
+ if(Object.prototype.toString.call( testUnits ) === '[object Array]') {
+ testUnits.forEach(function(unit) {
+ radiiTests = buildRadiiTests(shape, type, unit);
+ results = results.concat(radiiTests);
+ });
+ } else {
+ var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii;
+ validRadii.forEach(function(test) {
+ var testCase = [], name, actual, expected;
+
+ // skip if this isn't explicitly testing length units
+ if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) {
+ actual = shape + '(' + setUnit(test[0], false, testUnits) +')';
+ // name
+ if (type.indexOf('lengthUnit') != -1) {
+ name = 'test unit: ' + units +' - '+ actual;
+ if(type.indexOf('computed') != -1)
+ name = name + ' - computed';
+ else
+ name = name + ' - inline';
+ }
+ else
+ name = actual +' - '+ type;
+
+ testCase.push(name);
+
+ // actual
+ testCase.push(actual);
+
+ // expected
+ if(type.indexOf('computed') != -1 && test.length == 3) {
+ expected = shape + '(' + setUnit(test[2], convert, testUnits) +')';
+ } else {
+ expected = shape + '(' + setUnit(test[1], convert, testUnits) +')';
+ }
+ testCase.push(expected);
+ results.push(testCase);
+ }
+ });
+ }
+ return unique(results);
+}
+
+function buildInsetTests(unit1, unit2, type) {
+ var results = new Array();
+ var convert = type == 'computed' ? true : false;
+
+ if(Object.prototype.toString.call( unit1 ) === '[object Array]') {
+ unit1.forEach(function(unit) {
+ insetTests = buildInsetTests(unit, unit2, type);
+ results = results.concat(insetTests);
+ });
+ } else {
+ validInsets.forEach(function(test) {
+ var testCase = [], name, actual, expected;
+
+ name = setUnit(test[0], false, unit1, unit2) +' - '+ type;
+ actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')';
+ expected = actual;
+
+ testCase.push(name);
+ testCase.push(actual);
+ testCase.push(expected);
+
+ results.push(testCase);
+ });
+ }
+ return unique(results);
+}
+
+function buildPolygonTests(unitSet, type) {
+ var results = new Array();
+ var convert = type == 'computed' ? true : false;
+
+ unitSet.forEach(function(set) {
+ validPolygons.forEach(function(test) {
+ var testCase = [];
+ // name
+ testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type);
+ // actual
+ testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')');
+ // expected
+ testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')');
+ results.push(testCase);
+ });
+ });
+ return unique(results);
+}
+
+function buildCalcTests(testCases, type) {
+ var results = new Array();
+ testCases.forEach(function(test){
+ var testCase = [];
+ if(type == 'computed') {
+ testCase.push(test[0] + ' - computed style');
+ testCase.push(test[0]);
+ testCase.push(test[2]);
+ }
+ else {
+ testCase.push(test[0] + ' - inline style');
+ testCase.push(test[0]);
+ testCase.push(test[1]);
+ }
+ testCase.push(type);
+ results.push(testCase)
+ });
+ return unique(results);
+}
+
+function unique(tests) {
+ var list = tests.concat();
+ for(var i = 0; i< list.length; ++i) {
+ for(var j = i+1; j < list.length; ++j) {
+ if(list[i][0] === list[j][0])
+ list.splice(j--, 1);
+ }
+ }
+ return list;
+}
+
+function setUnit(str, convert, unit1, unit2, unit3) {
+ var retStr = str;
+ if(typeof unit1 !== 'undefined') {
+ retStr = retStr.replace(new RegExp('u1', 'g'), unit1);
+ }
+ if(typeof unit2 !== 'undefined') {
+ retStr = retStr.replace(new RegExp("u2", 'g'), unit2);
+ }
+ if(typeof unit3 !== 'undefined') {
+ retStr = retStr.replace(new RegExp("u3", 'g'), unit3);
+ }
+ retStr = convert ? convertToPx(retStr) : retStr;
+ return retStr;
+}
+
+function roundCssNumber(n) {
+ // See https://drafts.csswg.org/cssom/#serializing-css-values for numbers.
+ return parseFloat(n.toPrecision(6));
+}
+
+function convertToPx(origValue) {
+
+ var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%|)/g);
+ if(!valuesToConvert)
+ return origValue;
+
+ var retStr = origValue;
+ for(var i = 0; i < valuesToConvert.length; i++) {
+ var unit = (valuesToConvert[i].match(/[a-z]{2,4}|%/) || '').toString();
+ var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0];
+
+ var number = parseFloat(numberStr);
+ var convertedUnit = 'px';
+ if( typeof number !== 'NaN' )
+ {
+ if (unit == 'in') {
+ number = (96 * number);
+ } else if (unit == 'cm') {
+ number = (37.795275591 * number);
+ } else if (unit == 'mm') {
+ number = (3.779527559 * number);
+ } else if (unit == 'pt') {
+ number = (1.333333333333 * number);
+ } else if (unit == 'pc') {
+ number = (16 * number);
+ } else if (unit == 'em') {
+ number = (16 * number);
+ } else if (unit == 'ex') {
+ number = (12.8 * number);
+ } else if (unit == 'ch') {
+ number = (16 * number);
+ } else if (unit == 'rem') {
+ number = (16 * number);
+ } else if (unit == 'vw') {
+ number = ((.01 * window.innerWidth) * number);
+ } else if (unit == 'vh') {
+ number = ((.01 * window.innerHeight) * number);
+ } else if (unit == 'vmin') {
+ number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
+ } else if (unit == 'vmax') {
+ number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
+ }
+ else {
+ convertedUnit = unit;
+ }
+ number = roundCssNumber(number);
+ var find = valuesToConvert[i];
+ var replace = number.toString() + convertedUnit;
+ retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit);
+ }
+ }
+ return retStr.replace(',,', ',');
+}
+
+function roundResultStr(str) {
+ if(Object.prototype.toString.call( str ) !== '[object String]')
+ return str;
+
+ var numbersToRound = str.match(/[0-9]+\.[0-9]+/g);
+ if(!numbersToRound)
+ return str;
+
+ var retStr = str;
+ for(var i = 0; i < numbersToRound.length; i++) {
+ num = parseFloat(numbersToRound[i]);
+ if( !isNaN(num) ) {
+ roundedNum = roundCssNumber(num);
+ retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString());
+ }
+ }
+
+ return retStr;
+}
+
+function generateInsetRoundCases(units, testType) {
+ var convert = testType.indexOf('computed') != -1 ? true : false;
+ var testUnit = units;
+ var sizes = [
+ '10' + units,
+ '20' + units,
+ '30' + units,
+ '40' + units
+ ];
+
+ function insetRound(value) {
+ return 'inset(10' +testUnit+ ' round ' + value + ')';
+ }
+
+ function serializedInsetRound(lhsValues, rhsValues, convert) {
+ var retStr = '';
+ if(!rhsValues)
+ retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')';
+ else
+ retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')';
+
+ if(convert)
+ return convertToPx(retStr);
+
+ return retStr;
+ }
+
+ var results = [], left, lhs, right, rhs;
+ for (left = 1; left <= 4; left++) {
+ lhs = sizes.slice(0, left).join(' ');
+ results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]);
+ for (right = 1; right <= 4; right++) {
+ rhs = sizes.slice(0, right).join(' ');
+ if(lhs == rhs)
+ results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]);
+ else
+ results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]);
+ }
+ }
+ return results;
+}
+
+function each(object, func) {
+ for (var prop in object) {
+ if (object.hasOwnProperty(prop)) {
+ func(prop, object[prop]);
+ }
+ }
+}
+
+/// For saving and restoring font properties
+var savedFontValues = { };
+
+function setupFonts() {
+ var fontProperties = {
+ 'font-family': 'Ahem',
+ 'font-size': '16px',
+ 'line-height': '1'
+ };
+ savedFontValues = { };
+ each(fontProperties, function (key, value) {
+ savedFontValues[key] = document.body.style.getPropertyValue(key);
+ document.body.style.setProperty(key, value);
+ });
+}
+
+function restoreFonts() {
+ each(savedFontValues, function (key, value) {
+ if (value) {
+ document.body.style.setProperty(key, value);
+ }
+ else {
+ document.body.style.removeProperty(key);
+ }
+ });
+ savedFontValues = { };
+}
+
+var validUnits = [
+ "cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests)
+ "em","ex","ch","rem", // Font relative length units
+ "vw","vh","vmin","vmax" // Viewport percentage units
+ ]
+
+/// [actual, expected]
+var validPositions = [
+
+/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ]
+ ["50%", "50% 50%"],
+ ["50u1", "50u1 50%"],
+ ["50% 50%", "50% 50%"],
+ ["50% 50u1", "50% 50u1"],
+ ["50u1 50%", "50u1 50%"],
+ ["50u1 50u1", "50u1 50u1"],
+
+///// [ keyword ], [ keyword keyword ] x 5 keywords
+ ["left", "0% 50%"],
+ ["top", "50% 0%"],
+ ["right", "100% 50%"],
+ ["bottom", "50% 100%"],
+ ["center", "50% 50%"],
+
+ ["left top", "0% 0%"],
+ ["left bottom", "0% 100%"],
+ ["left center", "0% 50%"],
+
+ ["top left", "0% 0%"],
+ ["top right", "100% 0%"],
+ ["top center", "50% 0%"],
+
+ ["right top", "100% 0%"],
+ ["right bottom", "100% 100%"],
+ ["right center", "100% 50%"],
+
+ ["bottom left", "0% 100%"],
+ ["bottom right", "100% 100%"],
+ ["bottom center", "50% 100%"],
+
+ ["center top", "50% 0%"],
+ ["center left", "0% 50%"],
+ ["center right", "100% 50%"],
+ ["center bottom", "50% 100%"],
+ ["center center", "50% 50%"],
+
+////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
+ ["left 50%", "0% 50%"],
+ ["left 50u1", "0% 50u1"],
+
+ ["50% top", "50% 0%"],
+ ["50u1 top", "50u1 0%"],
+
+ ["right 80%", "100% 80%"],
+ ["right 80u1", "100% 80u1"],
+
+ ["70% bottom", "70% 100%"],
+ ["70u1 bottom", "70u1 100%"],
+
+ ["center 60%", "50% 60%"],
+ ["center 60u1", "50% 60u1"],
+ ["60% center", "60% 50%"],
+ ["60u1 center", "60u1 50%"],
+
+////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
+////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
+ ["left 50% top 50%", "50% 50%"],
+ ["left 50% top 50u1", "50% 50u1"],
+ ["left 50% bottom 70%", "50% calc(30%)", "50% 30%"],
+ ["left 50% bottom 70u1", "[convert] 50% calc(100% - 70u1)"],
+ ["left 50u1 top 50%", "50u1 50%"],
+ ["left 50u1 top 50u1", "50u1 50u1"],
+ ["left 50u1 bottom 70%", "50u1 calc(30%)", "50u1 30%"],
+
+ ["top 50% left 50%", "50% 50%"],
+ ["top 50% left 50u1", "50u1 50%"],
+ ["top 50% right 80%", "calc(20%) 50%", "20% 50%"],
+ ["top 50% right 80u1", "[convert] calc(100% - 80u1) 50%"],
+ ["top 50u1 left 50%", "50% 50u1"],
+ ["top 50u1 left 50u1", "50u1 50u1"],
+ ["top 50u1 right 80%", "calc(20%) 50u1", "20% 50u1"],
+
+ ["bottom 70% left 50%", "50% calc(30%)", "50% 30%"],
+ ["bottom 70% left 50u1", "50u1 calc(30%)", "50u1 30%"],
+ ["bottom 70% right 80%", "calc(20%) calc(30%)", "20% 30%"],
+ ["bottom 70% right 80u1", "[convert] calc(100% - 80u1) calc(30%)", "calc(100% - 80u1) 30%"],
+ ["bottom 70u1 left 50%", "[convert] 50% calc(100% - 70u1)"],
+ ["bottom 70u1 right 50%", "[convert] calc(50%) calc(100% - 70u1)", "50% calc(100% - 70u1)"],
+ ["bottom 70u1 right 80u1", "[convert] calc(100% - 80u1) calc(100% - 70u1)"],
+
+ ["right 80% top 50%", "calc(20%) 50%", "20% 50%"],
+ ["right 80% top 50u1", "calc(20%) 50u1", "20% 50u1"],
+ ["right 80% bottom 70%", "calc(20%) calc(30%)", "20% 30%"],
+ ["right 80% bottom 70u1", "[convert] calc(20%) calc(100% - 70u1)", "20% calc(100% - 70u1)"],
+ ["right 80u1 top 50%", "[convert] calc(100% - 80u1) 50%"],
+ ["right 80u1 bottom 70%", "[convert] calc(100% - 80u1) calc(30%)", "calc(100% - 80u1) 30%"],
+ ["right 80u1 bottom 70u1", "[convert] calc(100% - 80u1) calc(100% - 70u1)"],
+];
+
+var invalidPositions = [
+////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
+ "50% left",
+ "50px left",
+ "top 50%",
+ "80% right",
+ "80px right",
+ "bottom 70%",
+ "bottom 70px",
+
+////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
+ "center center 60%",
+ "center center 60px",
+
+ "left center 60%",
+ "left center 60px",
+ "left right 80%",
+ "left right 80px",
+ "left left 50%",
+ "left left 50px",
+
+ "top center 60%",
+ "top center 60px",
+ "top bottom 80%",
+ "top bottom 80px",
+ "top top 50%",
+ "top top 50px",
+
+ "bottom center 60%",
+ "bottom center 60px",
+ "bottom top 50%",
+ "bottom top 50px",
+ "bottom bottom 50%",
+ "bottom bottom 50px",
+
+ "right center 60%",
+ "right center 60px",
+ "right left 50%",
+ "right left 50px",
+ "right right 70%",
+ "right right 70px",
+
+////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
+ "center 60% top",
+ "center 60px top",
+ "center 60% bottom",
+ "center 60px bottom",
+ "center 60% left",
+ "center 60px left",
+ "center 60% right",
+ "center 60px right",
+ "center 60% center",
+ "center 60px center",
+
+ "left 50% right",
+ "left 50px right",
+ "left 50% left",
+ "left 50px left",
+
+ "top 50% bottom",
+ "top 50px bottom",
+ "top 50% top",
+ "top 50px top",
+
+ "bottom 70% top",
+ "bottom 70px top",
+ "bottom 70% bottom",
+ "bottom 70px bottom",
+
+ "right 80% left",
+ "right 80px left",
+
+////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
+////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
+ "center 60% top 50%",
+ "center 60% top 50px",
+ "center 60% bottom 70%",
+ "center 60% bottom 70px",
+ "center 60% left 50%",
+ "center 60% left 50px",
+ "center 60% right 70%",
+ "center 60% right 70px",
+ "center 60% center 65%",
+ "center 60% center 65px",
+ "center 60px top 50%",
+ "center 60px top 50px",
+ "center 60px bottom 70%",
+ "center 60px bottom 70px",
+ "center 60px left 50%",
+ "center 60px left 50px",
+ "center 60px right 70%",
+ "center 60px right 70px",
+ "center 60px center 65%",
+ "center 60px center 65px",
+
+ "left 50% center 60%",
+ "left 50% center 60px",
+ "left 50% right 80%",
+ "left 50% right 80px",
+ "left 50% left 50%",
+ "left 50% left 50px",
+ "left 50px center 60%",
+ "left 50px center 60px",
+ "left 50px right 80%",
+ "left 50px right 80px",
+ "left 50px left 50%",
+ "left 50px left 50px",
+
+ "top 50% center 60%",
+ "top 50% center 60px",
+ "top 50% bottom 50%",
+ "top 50% bottom 50px",
+ "top 50% top 50%",
+ "top 50% top 50px",
+ "top 50px center 60%",
+ "top 50px center 60px",
+ "top 50px bottom 70%",
+ "top 50px bottom 70px",
+ "top 50px top 50%",
+ "top 50px top 50px",
+
+ "bottom 70% center 60%",
+ "bottom 70% center 60px",
+ "bottom 70% top 50%",
+ "bottom 70% top 50px",
+ "bottom 70% bottom 50%",
+ "bottom 70% bottom 50px",
+ "bottom 70px center 60%",
+ "bottom 70px center 60px",
+ "bottom 70px top 50%",
+ "bottom 70px top 50px",
+ "bottom 70px bottom 50%",
+ "bottom 70px bottom 50px",
+
+ "right 80% center 60%",
+ "right 80% center 60px",
+ "right 80% left 50%",
+ "right 80% left 50px",
+ "right 80% right 85%",
+ "right 80% right 85px",
+ "right 80px center 60%",
+ "right 80px center 60px",
+ "right 80px left 50%",
+ "right 80px left 50px",
+ "right 80px right 85%",
+ "right 80px right 85px"
+];
+
+// valid radii values for circle + ellipse
+// [value, expected_inline, [expected_computed?]]
+var validCircleRadii = [
+ ['at 50% 50%', 'at 50% 50%'],
+ ['50u1 at 50% 50%', '50u1 at 50% 50%'],
+ ['50% at 50% 50%', '50% at 50% 50%'],
+ ['closest-side at 50% 50%', 'at 50% 50%'],
+ ['farthest-side at 50% 50%', 'farthest-side at 50% 50%'],
+ ['', ''],
+ ['50u1', '50u1'],
+ ['50%', '50%'],
+ ['closest-side', ''],
+ ['farthest-side', 'farthest-side']
+]
+var validEllipseRadii = [
+ ['at 50% 50%', 'at 50% 50%', 'at 50% 50%'],
+ ['50u1 100u1 at 50% 50%', '50u1 100u1 at 50% 50%'],
+ ['100u1 100px at 50% 50%', '100u1 100px at 50% 50%'],
+ ['25% 50% at 50% 50%', '25% 50% at 50% 50%'],
+ ['50u1 25% at 50% 50%', '50u1 25% at 50% 50%'],
+ ['25% 50u1 at 50% 50%', '25% 50u1 at 50% 50%'],
+ ['25% closest-side at 50% 50%', '25% closest-side at 50% 50%'],
+ ['25u1 closest-side at 50% 50%', '25u1 closest-side at 50% 50%'],
+ ['closest-side 75% at 50% 50%', 'closest-side 75% at 50% 50%'],
+ ['closest-side 75u1 at 50% 50%', 'closest-side 75u1 at 50% 50%'],
+ ['25% farthest-side at 50% 50%', '25% farthest-side at 50% 50%'],
+ ['25u1 farthest-side at 50% 50%', '25u1 farthest-side at 50% 50%'],
+ ['farthest-side 75% at 50% 50%', 'farthest-side 75% at 50% 50%'],
+ ['farthest-side 75u1 at 50% 50%', 'farthest-side 75u1 at 50% 50%'],
+ ['closest-side closest-side at 50% 50%', 'at 50% 50%'],
+ ['farthest-side farthest-side at 50% 50%', 'farthest-side farthest-side at 50% 50%'],
+ ['closest-side farthest-side at 50% 50%', 'closest-side farthest-side at 50% 50%'],
+ ['farthest-side closest-side at 50% 50%', 'farthest-side closest-side at 50% 50%'],
+ ['', ''],
+ ['50u1 100u1', '50u1 100u1'],
+ ['100u1 100px', '100u1 100px'],
+ ['25% 50%', '25% 50%'],
+ ['50u1 25%', '50u1 25%'],
+ ['25% 50u1', '25% 50u1'],
+ ['25% closest-side', '25% closest-side'],
+ ['25u1 closest-side', '25u1 closest-side'],
+ ['closest-side 75%', 'closest-side 75%'],
+ ['closest-side 75u1', 'closest-side 75u1'],
+ ['25% farthest-side', '25% farthest-side'],
+ ['25u1 farthest-side', '25u1 farthest-side'],
+ ['farthest-side 75%', 'farthest-side 75%'],
+ ['farthest-side 75u1', 'farthest-side 75u1'],
+ ['closest-side closest-side', ''],
+ ['farthest-side farthest-side', 'farthest-side farthest-side'],
+ ['closest-side farthest-side', 'closest-side farthest-side'],
+ ['farthest-side closest-side', 'farthest-side closest-side']
+]
+
+var validInsets = [
+ ["One arg - u1", "10u1"],
+ ["One arg - u2", "10u2"],
+ ["Two args - u1 u1", "10u1 20u1"],
+ ["Two args - u1 u2", "10u1 20u2"],
+ ["Two args - u2 u1", "10u2 20u1"],
+ ["Two args - u2 u2", "10u2 20u2"],
+ ["Three args - u1 u1 u1", "10u1 20u1 30u1"],
+ ["Three args - u1 u1 u2", "10u1 20u1 30u2"],
+ ["Three args - u1 u2 u1", "10u1 20u2 30u1"],
+ ["Three args - u1 u2 u2 ", "10u1 20u2 30u2"],
+ ["Three args - u2 u1 u1", "10u2 20u1 30u1"],
+ ["Three args - u2 u1 u2 ", "10u2 20u1 30u2"],
+ ["Three args - u2 u2 u1 ", "10u2 20u2 30u1"],
+ ["Three args - u2 u2 u2 ","10u2 20u2 30u2"],
+ ["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"],
+ ["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"],
+ ["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"],
+ ["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"],
+ ["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"],
+ ["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"],
+ ["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"],
+ ["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"],
+ ["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"],
+ ["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"],
+ ["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"],
+ ["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"],
+ ["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"],
+ ["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"],
+ ["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"],
+ ["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"]
+]
+
+var validPolygons = [
+ ["One vertex - u1 u1", "10u1 20u1"],
+ ["One vertex - u1 u2", "10u1 20u2"],
+ ["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"],
+ ["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"],
+ ["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"],
+ ["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"],
+ ["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"],
+ ["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"],
+ ["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"],
+ ["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"],
+ ["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"],
+]
+
+// [test value, expected property value, expected computed style]
+// See https://github.com/w3c/csswg-drafts/issues/4399#issuecomment-556160413
+// for the latest resolution to this respect.
+var calcTestValues = [
+ ["calc(10in)", "calc(960px)", "960px"],
+ ["calc(10in + 20px)", "calc(980px)", "980px"],
+ ["calc(30%)", "calc(30%)", "30%"],
+ ["calc(100%/4)", "calc(25%)", "25%"],
+ ["calc(25%*3)", "calc(75%)", "75%"],
+ ["calc(25%*3 - 10in)", "calc(75% - 960px)", "calc(75% - 960px)"],
+ ["calc((12.5%*6 + 10in) / 4)", "calc(18.75% + 240px)", "calc(18.75% + 240px)"]
+]
+
+return {
+ testInlineStyle: testInlineStyle,
+ testComputedStyle: testComputedStyle,
+ testShapeMarginInlineStyle: testShapeMarginInlineStyle,
+ testShapeMarginComputedStyle: testShapeMarginComputedStyle,
+ testShapeThresholdInlineStyle: testShapeThresholdInlineStyle,
+ testShapeThresholdComputedStyle: testShapeThresholdComputedStyle,
+ buildTestCases: buildTestCases,
+ buildRadiiTests: buildRadiiTests,
+ buildPositionTests: buildPositionTests,
+ buildInsetTests: buildInsetTests,
+ buildPolygonTests: buildPolygonTests,
+ generateInsetRoundCases: generateInsetRoundCases,
+ buildCalcTests: buildCalcTests,
+ validUnits: validUnits,
+ calcTestValues: calcTestValues,
+ roundResultStr: roundResultStr,
+ setupFonts: setupFonts,
+ restoreFonts: restoreFonts,
+}
+})();