p1, p2, p3, p4 Instance Properties of DOMQuad (mdn#36700)

* add: p1, p2, p3, p4 DOMPoints defining the corners of an arbitrary quadrilateral

* Removed redundant lines for p1, p2, p3, p4 and added ReadOnlyInline to each

* remove: unnecessary line breaks

* Apply suggestions from code review

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

files/en-us/web/api/domquad/index.md

@@ -16,8 +16,14 @@ A `DOMQuad` is a collection of four `DOMPoint`s defining the corners of an arbit
 
 ## Instance properties
 
-- p1,p2,p3,p4 {{ReadOnlyInline}}
-  - : are {{domxref("DOMPoint")}} objects for each of the `DOMQuad` object's four corners.
+- {{domxref("DOMQuad.p1")}} {{ReadOnlyInline}}
+  - : A {{domxref("DOMPoint")}} representing one corner of the `DOMQuad`.
+- {{domxref("DOMQuad.p2")}} {{ReadOnlyInline}}
+  - : A {{domxref("DOMPoint")}} representing one corner of the `DOMQuad`.
+- {{domxref("DOMQuad.p3")}} {{ReadOnlyInline}}
+  - : A {{domxref("DOMPoint")}} representing one corner of the `DOMQuad`.
+- {{domxref("DOMQuad.p4")}} {{ReadOnlyInline}}
+  - : A {{domxref("DOMPoint")}} representing one corner of the `DOMQuad`.
 
 ## Instance methods
 

files/en-us/web/api/domquad/p1/index.md

@@ -0,0 +1,35 @@
+---
+title: "DOMQuad: p1 property"
+short-title: p1
+slug: Web/API/DOMQuad/p1
+page-type: web-api-instance-property
+browser-compat: api.DOMQuad.p1
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`DOMQuad`** interface's **`p1`** property holds the {{domxref("DOMPoint")}} object that represents one of the four corners of the `DOMQuad`. When created from {{domxref("DOMQuad.fromRect()")}}, it is the point (x, y).
+
+## Value
+
+The {{domxref("DOMPoint")}} object includes the following double-precision floating-point values:
+
+- {{domxref("DOMPoint.x")}}: The horizontal coordinate.
+- {{domxref("DOMPoint.y")}}: The vertical coordinate.
+- {{domxref("DOMPoint.z")}}: The depth coordinate.
+- {{domxref("DOMPoint.w")}}: The perspective value. The default value is 1.0.
+
+Each of these values is **unrestricted**, meaning that it is allowed to be infinite or invalid (that is, its value may be {{jsxref("NaN")}} or {{jsxref("Infinity", "±Infinity")}}).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- The other `DOMPoint` properties: {{domxref("DOMQuad.p2", "p2")}},
+  {{domxref("DOMQuad.p3", "p3")}}, and {{domxref("DOMQuad.p4", "p4")}}.

files/en-us/web/api/domquad/p2/index.md

@@ -0,0 +1,35 @@
+---
+title: "DOMQuad: p2 property"
+short-title: p2
+slug: Web/API/DOMQuad/p2
+page-type: web-api-instance-property
+browser-compat: api.DOMQuad.p2
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`DOMQuad`** interface's **`p2`** property holds the {{domxref("DOMPoint")}} object that represents one of the four corners of the `DOMQuad`. When created from {{domxref("DOMQuad.fromRect()")}}, it is the point (x + width, y).
+
+## Value
+
+The {{domxref("DOMPoint")}} object includes the following double-precision floating-point values:
+
+- {{domxref("DOMPoint.x")}}: The horizontal coordinate.
+- {{domxref("DOMPoint.y")}}: The vertical coordinate.
+- {{domxref("DOMPoint.z")}}: The depth coordinate.
+- {{domxref("DOMPoint.w")}}: The perspective value. The default value is 1.0.
+
+Each of these values is **unrestricted**, meaning that it is allowed to be infinite or invalid (that is, its value may be {{jsxref("NaN")}} or {{jsxref("Infinity", "±Infinity")}}).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- The other `DOMPoint` properties: {{domxref("DOMQuad.p1", "p1")}},
+  {{domxref("DOMQuad.p3", "p3")}}, and {{domxref("DOMQuad.p4", "p4")}}.

files/en-us/web/api/domquad/p3/index.md

@@ -0,0 +1,35 @@
+---
+title: "DOMQuad: p3 property"
+short-title: p3
+slug: Web/API/DOMQuad/p3
+page-type: web-api-instance-property
+browser-compat: api.DOMQuad.p3
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`DOMQuad`** interface's **`p3`** property holds the {{domxref("DOMPoint")}} object that represents one of the four corners of the `DOMQuad`. When created from {{domxref("DOMQuad.fromRect()")}}, it is the point (x + width, y + height).
+
+## Value
+
+The {{domxref("DOMPoint")}} object includes the following double-precision floating-point values:
+
+- {{domxref("DOMPoint.x")}}: The horizontal coordinate.
+- {{domxref("DOMPoint.y")}}: The vertical coordinate.
+- {{domxref("DOMPoint.z")}}: The depth coordinate.
+- {{domxref("DOMPoint.w")}}: The perspective value. The default value is 1.0.
+
+Each of these values is **unrestricted**, meaning that it is allowed to be infinite or invalid (that is, its value may be {{jsxref("NaN")}} or {{jsxref("Infinity", "±Infinity")}}).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- The other `DOMPoint` properties: {{domxref("DOMQuad.p1", "p1")}},
+  {{domxref("DOMQuad.p2", "p2")}}, and {{domxref("DOMQuad.p4", "p4")}}.

files/en-us/web/api/domquad/p4/index.md

@@ -0,0 +1,35 @@
+---
+title: "DOMQuad: p4 property"
+short-title: p4
+slug: Web/API/DOMQuad/p4
+page-type: web-api-instance-property
+browser-compat: api.DOMQuad.p4
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`DOMQuad`** interface's **`p4`** property holds the {{domxref("DOMPoint")}} object that represents one of the four corners of the `DOMQuad`. When created from {{domxref("DOMQuad.fromRect()")}}, it is the point (x, y + height).
+
+## Value
+
+The {{domxref("DOMPoint")}} object includes the following double-precision floating-point values:
+
+- {{domxref("DOMPoint.x")}}: The horizontal coordinate.
+- {{domxref("DOMPoint.y")}}: The vertical coordinate.
+- {{domxref("DOMPoint.z")}}: The depth coordinate.
+- {{domxref("DOMPoint.w")}}: The perspective value. The default value is 1.0.
+
+Each of these values is **unrestricted**, meaning that it is allowed to be infinite or invalid (that is, its value may be {{jsxref("NaN")}} or {{jsxref("Infinity", "±Infinity")}}).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- The other `DOMPoint` properties: {{domxref("DOMQuad.p1", "p1")}},
+  {{domxref("DOMQuad.p2", "p2")}}, and {{domxref("DOMQuad.p3", "p3")}}.